Dynamically added content not taking alert function

Question

Dynamically added content not taking alert function. I tried many ways to make this work but i am not able to get it right. I am sharing the fiddle.

Note: Please fork new fiddle when you are editing it.

thanks in advance.

`http://jsfiddle.net/kc5aa/2/`

on which event you are trying to show `alert()`? have you tried `.on()`? — Bhushan Kawadkar, Jul 30 '14 at 13:23
Yes i have tried all that. please check the [fiddle](http://jsfiddle.net/kc5aa/2/) — Danny Koshy, Jul 30 '14 at 13:28

score 4 · Accepted Answer · edited May 23 '17 at 12:11

4

You just need to bind event using .on() for dynamically generated elements. This will work for normal elements also.

change on click event binding of checkbox to below code :

 $('.container').on("click",'.checkBox',function () {
        if ($('.checkBox').is(':checked')) {
            alert($(this).val())
        }
    });

See this for using .on() for dynamic elements.

edited May 23 '17 at 12:11

Community

answered Jul 30 '14 at 13:26

Bhushan Kawadkar

Do you have any special reason to delegate the click from the .container instead of, for instance, the document itself ? – Flo Schild Jul 30 '14 at 13:30
yes, if I use `document` then it will bind all checkboxes with class="checkBox" inside html and that may get wrong. OP want to target only checkboxes inside `container` div. – Bhushan Kawadkar Jul 30 '14 at 13:33
Okay sure, didn't think about it, but is there also any difference at memory level or execution speed for instance ? – Flo Schild Jul 30 '14 at 13:34
yes, it creates single handler.. more information is on http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – Bhushan Kawadkar Jul 30 '14 at 13:35

score 0 · Answer 2 · answered Jul 30 '14 at 13:30

0

  $(document).on('click','.checkBox', function () {
    if ($('.checkBox').is(':checked')) {
        alert($(this).val())
    }
});

answered Jul 30 '14 at 13:30

Anil

2 Answers2