Unable to attach onclick to img added in JS

[Kumara SharmaS]

Hi All,

I've dynamically added some images to the body.
Tried to register a onclick event for all the images, as follows:

				
var img = document.createElement('img');
					img.setAttribute("src", "images/Kids_Bedroom_Off.png");
				img.setAttribute("id", i);
				//img.setAttribute("onclick", "function clickFunc() { alert($(this).id); }");
				img.className = "people";

setAttribute onclick dint work, so thought I can add a class name and use

$(".people").click(function() {
		$(this).append(dmsg);
	});

which dint work either.
I gave a direct alert in the first attempt and it printed all undefined as I think there are no <img> tags on the HTML page.
If I add images via js, wont document.getElementsById return these.

How can I add the onclick event. Thanks in advance.

[Gregg Bolinger]

If you're doing it while creating the element, you should use

element.addEventListener 
or 
element.attachEvent.  

Adding the onclick as an attribute won't work, as you have discovered.

If you're doing it using jQuery after the fact, you need to use the proper syntax:

$('body').on("click", ".people", function(e) {

});

This will, basically, watch for new elements with a class of people to show up in the dom and register the event. See documentation.

[Bear Bibeault]

If you are using jQuery. why are you using createElement? Why not use jQuery to create the elements? It's a lot easier and more consistent.

[Kumara SharmaS]

Thanks Gregg. I tried giving,

img.className = "people";

and then the jQuery syntax you'd given. It worked!