jquery dynamically added checkbox not working with change() function

Question

I dynamically load in a few li's that have a label and a checkbox in them to another visible ul. I set the checkboxes to be checked="checked" and i am trying to trigger an event to happen when i change these dynamically inserted checkboxes but nothing occurs.

Here is the jquery:

$(".otherProductCheckbox:checkbox").change( function(){
    alert('test');
});

Here is the html for the dynamically added li's:

<li class="otherProduct"><input type="checkbox" class="otherProductCheckbox radioCheck" checked="checked"/><label>Product Name</label></li>

Any idea why i cant get the alert to happen when the checkbox changes its checked state?

Teja Kantamneni · Accepted Answer · 2011-01-14 15:25:27Z

21

You have to use liveQuery or live to bind events to dynamically added elements.

$(".otherProductCheckbox:checkbox").live('change', function(){
    alert('test');
});

EDIT To work in IE, you have to use click not change

$(".otherProductCheckbox:checkbox").live('click', function(){
        alert('test');
 });

edited Jan 14, 2011 at 15:25

answered Jan 14, 2011 at 14:53

Teja Kantamneni

17.5k12 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

estern Over a year ago

@Teja Kantamneni: Perfect. Thanks for the direction. Still learning the ins and outs of jquery.

Gareth Over a year ago

You're only required to do that if the elements are being added after the event handler has been set up.

estern Over a year ago

@Gareth: yah that makes sense now.

Teja Kantamneni Over a year ago

Thats the issue with IE, IE will trigger change event only after the element looses the focus. webbugtrack.blogspot.com/2007/11/…

Teja Kantamneni Over a year ago

For fix, use click instead of change

|

mvemjsunp · Accepted Answer · 2013-10-07 22:20:19Z

21

Since live() is now deprecated as of jQuery 1.7, I thought I'd post the solution that worked for me on the same problem (trigger event when dynamically added checkboxes are changed).

$(document).on('click', '.otherProductCheckbox', function() {
    alert('test');
});

answered Oct 7, 2013 at 22:20

mvemjsunp

3412 silver badges4 bronze badges

1 Comment

Anish Over a year ago

document.getElementById('id').live('click',function() { alert('test'); }); It is not working for me.. what "otherProductCheckbox" means here ?

Mohamed Sajjadh · Accepted Answer · 2021-01-14 07:45:29Z

0

neither of the above worked for me, but this one worked when adding the checkbox dynamically for a list of items in a listview.

$('.favourite_itemList').on('click','.checkBox', function () {
   alert('test')
)};

Although no visible function/attribute change is shown in the particular checkbox element when optIn or optOut, the above code works well for me.

answered Jan 14, 2021 at 7:45

Mohamed Sajjadh

1692 silver badges12 bronze badges

Collectives™ on Stack Overflow

jquery dynamically added checkbox not working with change() function

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related