last day (15 days later) » 

7:41 PM
0
A: Append mouseover event to img in a div with jQuery

RyuuYou can use the jquery on function to add handlers to events like so $('#your_image_id').on('mouseover', function() { console.log('hello'); }); Edit To do it dynamically: $('#my_div').append($('<img>').attr('src', avatar).on('mouseover', function() { console.log('hello'); }));

 
Hi. The point is that I do not have ids, as I am trying to do it dynamically.
 
Updated my answer to work dynamically
 
Seems nice, but is there a way to do it my way? Like to append everything at once to the div - the event, the img and the link?
 
Yup, easy enough. Updated. Unfortunately, it doesn't appear that you can assign event handlers using the object notation that you've specified though
 
After the update I am missing the a href ... :)
 
7:41 PM
Why would you want an href on an img? Should we move this to a chat as the comments are getting a bit long :P
 
hi
 
Evenin'
 
I am just building a small app for me
 
can you re-run me what you're trying to do?
 
and the href on the img is something I was thinking of
 
7:42 PM
Why though?
 
The last solution you offered : $('#my_div').append($('<img>').attr('src', avatar).on('mouseover', function() {
alert(login);
}));
 
As that is techincally invalid
 
What do you mean?
Why should it be invalid?
 
According to the w3c standard, an img shouldn't have an href
It should have a src attribute
If you want to have that url, I'd suggest using a data attribute
Essentially the same thing, but is valid
So, you'd have data-src instead of src
 
I meant a link, when I said href ...
sry
 
7:44 PM
Ohhhh
My misunderstanding
 
Anyway, is something like this feasible
 
So you want the img instead an a tag?
 
$('#my_div).children().last().mouseover(function() {
$('#my_otherdiv').innerHTML = "ale";
});
I want to add image on div, with a link for every image
and to put a mouseover
for the image
as well
so far I have managed the first part
 
The code you've just written is possible, but if you quickly move your mouse on and off the element with the mouseover event on it, you'll get lots of extra elements in #my_otherdiv
Could you perhaps show me some of the HTML?
 
<body>
<label id = "clickButton">Something like button</label>
<hr>
<div>Here is the data:</div>
<div id="my_div"></div><p></p>
<div id="my_otherdiv"></div><p></p>
</body>
just a simple app I am building
 
7:49 PM
So, hovering over the last element in #my_div should create a new element in #my_otherdiv, correct?
 
nope
hovering over any element in my_div
should create a new message in my_otherdiv
 
Ahh, so why not have the hover on #my_div?
 
but I am using last, because I am in a loop in teh div
 
That would be better for performance
 
can you come up with an example?
 
7:53 PM
$('#my_div').on('mouseover', function() {
Sorry, hit enter too early :P
 
ok
 
$('#my_div').on('mouseover', function() {
$('#my_other_div').append('append_something_here');
});
That's what I'm suggesting for the mouseover on the main div
If it has to work on all of its children, then why not just put it on the parent container. That way, it's only one mouseover event
However, if you need information about the element that was hovered over, then your suggestion would probably be more suitable
But, can you explain what you want to do with the a tag and img?
 
yeah, but the idea is to append to the other my_other_div something that has to do with the img
on which the hover is over
 
I'm with you now
 
ok
 
7:56 PM
Exactly what are you trying to append
 
just simple text
it could be even the name of the picture
 
Can you give me an example of the html you're trying to append and I can show you the js needed?
 
does not matter
 
Ok
$('#my_div).children().last().on('mouseover', function() {
$('#my_other_div').append($(this).attr('src');
})
something like that should work
this in this instance points to the element that's been hovered over
 
let me see
 
8:02 PM
No problem, I'll wait
 
its not working
here is what I have in the js
		for (var index in obj){
			$("#my_div").append($("<a>",
			{
				href: urlSite,
				html: $("<img>", { src: avatar }),
			}));

			$('#my_div').children().last().mouseover(function() {
				$('#my_other_div').append($(this).attr('src'));
			});
		}
 
This looks like it's appending lots of mouseover events to the last child
$('#my_div').children().last()
 
yeah, but the idea is that I am on a loop
thus every time the last child is different>?
or not?]
 
I'm not entirely sure, as Jquery does some odd caching in some instances
What about this
for (var index in obj){
$("#my_div").append($("<a>",
{
href: urlSite,
html: $("<img>", { src: avatar }),
}).mouseover(function() {
$('#my_other_div').append($(this).attr('src'));
}));
}
 
let me check it
 
8:13 PM
Ok
 
nope, it does not work
and chrome console does not give any error
are you sure that append($(this).attr('src'))
 
Can you create a jsfiddle with what you've currently got?
 
would return something in the HTML?
sure
 
Thanks
And, only if the hovered element has a src attribute
Otherwise text() or even just this would be better
 
now it works
I changed it to
for a reason it did not see the src
But I was able to get the href
which is ok
 
8:21 PM
Ah, it's because the last element is an a tag
If you get the img inside of it then it will get the src
 
?
ok
Thanks :)
 
My pleasure :)
 
I will let you know, once my app is ready :)
If you wish :)
And I publish it in my blog :)
 
Sure!
I'd be glad to see it
 
:)
Have a nice evening
 
8:23 PM
Thank you, you too :)
Best of luck with the app
and feel free to ask me if you're struggling with anything else
 
ok, thanks :)
 

  last day (15 days later) »