I'm trying to select an element based on its class (using $(".class")) and I'm having an issue, and I'm not sure why it's happening.

First off, the element is an image. It gets created when a function is executed by:

$("#container").append("<img class='removeIcon' src='images/remove.png' remove='"+$(this).val()+"' />");

This works as it should. The image is added when the function is fired, even multiple times. And the value of each is what it's meant to be, it's all good. The element is fine.

What isn't working...

$(".removeIcon").click(function() {
    alert();
    console.log("Clicked!");
});

I'm not sure if it's not working because the image is added later, or maybe I'm doing something wrong? But I whenever I click any of the images with that class, there's no alert dialog, and no console log.

I've typed, into console, $(".removeIcon"); - and it shows all of the images with that class, so I don't understand what's wrong. Can you not have a click even on a class selector?

Thanks in advance!

I'm trying to select an element based on its class (using $(".class")) and I'm having an issue, and I'm not sure why it's happening.

First off, the element is an image. It gets created when a function is executed by:

$("#container").append("<img class='removeIcon' src='images/remove.png' remove='"+$(this).val()+"' />");

This works as it should. The image is added when the function is fired, even multiple times. And the value of each is what it's meant to be, it's all good. The element is fine.

What isn't working...

$(".removeIcon").click(function() {
    alert();
    console.log("Clicked!");
});

I'm not sure if it's not working because the image is added later, or maybe I'm doing something wrong? But I whenever I click any of the images with that class, there's no alert dialog, and no console log.

I've typed, into console, $(".removeIcon"); - and it shows all of the images with that class, so I don't understand what's wrong. Can you not have a click even on a class selector?

Thanks in advance!

• javascript
• jquery
• html
• css

• Use the jQuery on() method – Suganthan Madhavan Pillai Commented Dec 4, 2014 at 4:09

3 Answers 3

your code only works for existing .removeIcon elements.

if you do add dynamic elements, try use .on

$("#container").on('click', '.removeIcon', function() {
    alert();
    console.log("Clicked!");
});

which binds click event on all .removeIcon elements inside #container (including dynamic added elements)

Yes, the problem is that it is being added later, so you have to delegate with:

$("#container").on('click', '.removeIcon', function() {
    alert();
    console.log("Clicked!");
});

So, the event will be asigned to the container but will act on .removeIcon items.

For more info check jQuery's on function.

click() function doesn't work with dynamically loaded data. You have to capture click event by DOM or by making onclick function

by DOM

$("#container").on('click', '.removeIcon', function() { console.log("click"); });

OR onclick function

$("#container").append("<img class='removeIcon' onclick="somefunctionInJS()" src='images/remove.png' remove='"+$(this).val()+"' />");