button created via jquery not triggering a .click event

Question

I have the following jquery code to create a button for each row in a table:

    $("#add_to_rule").click(function(){
        var contact_type=$("#contact_types option:selected").val();
        var email_address = $('#email_address').val();
        var call_order = $('#call_order').val();

        var htmlstring = '<tr>'
        htmlstring = htmlstring + '<td><input type="button" value="Remove" class="removeruleset"/></td>'
        htmlstring = htmlstring + '<td>' + contact_type + '</td>'
        htmlstring = htmlstring + '<td>' + email_address + '</td>'
        htmlstring = htmlstring + '<td>' + call_order + '</td>'
        htmlstring = htmlstring + '</tr>'
        $('#rule_summary tr:last').after(htmlstring);
    });

Then, I've got some more jquery to handle the .click event for the remove button:

    $(".removeruleset").click(function(){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

The code to add a row to my table, along with the remove button works. But when I click on one of the remove buttons, it doesn't trigger the click event.

As a test, I created a button like so, outside of jquery:

<input type="button" class="removeruleset" value="push me">

and it triggers the click event no problem. Can you tell me where I'm going wrong?

Thank you.

EDIT 1

I've tried changing the code to look like this:

       $(document).on("click", ".removeruleset", function(){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

But that gives me the following error :

SCRIPT438: Object doesn't support property or method 'on'

I'm using version 1.5.2.

So, I referred to the article that's mentioned in some of the comments (Event binding on dynamically created elements?) and tried this instead:

    $("body").delegate("click", ".removeruleset", function(e){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

That got rid of the error message but the event handler is still not triggered Also tried:

    $("body").on("click", ".removeruleset", function(e){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

Thanks.

You need to do event delegation, or attach the event after creating the elements on the DOM. — crush, Jun 11 '13 at 19:30
This might help: http://stackoverflow.com/a/17046190/1823841 — palaѕн, Jun 11 '13 at 19:32
I dont get how its gonna alert an id, that doesnt exist...your doesnt have an id — Kylie, Jun 11 '13 at 19:35
@KyleK.. He is not even able to alert('inside').. The answer lies in event delegation.. — writeToBhuwan, Jun 11 '13 at 19:36
sorry guys. i didn't know how to phrase the question to search for similar posts. — mark li, Jun 11 '13 at 19:38

score 2 · Answer 1 · answered Jun 11 '13 at 19:30

2

Try this:-

$(document).on("click", ".removeruleset", function(){
            alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
    });

When you added the event to the element it was not existing. To make this work you need to use event delegation.

answered Jun 11 '13 at 19:30

pvnarula

2,771
18
22

1

**Exactly** every day SO gets hit for about 20 questions on delegating an event for dynamically generated elements.The SO community is here to answer Q but also to close duplicates. Closing a question as `Duplicate` provides the OPoster with the related answer. – Roko C. Buljan Jun 11 '13 at 19:34
I've tried this code but I'm getting SCRIPT438: Object doesn't support property or method 'on'. I'll google to see what's up. – mark li Jun 11 '13 at 19:40
Which version of jQuery you are using? – pvnarula Jun 11 '13 at 19:41
1.5.2 is the version number I'm using according to $().jquery method.. – mark li Jun 11 '13 at 19:43
The you can use "live" function of jQuery. I recommend update the version of Jquery. 1.5.2 is very old version. – pvnarula Jun 11 '13 at 19:50

score 1 · Answer 2 · answered Jun 11 '13 at 19:33

hi another way is to do this htmlstring = htmlstring + '<td><input type="button" value="Remove" class="removeruleset"click=\"myhandler\"/></td>'

where myhandler is a function

function myhandler(){
 alert('inside');
            id = $(this).closest('tr').attr('id');
            alert(id);
}

Kousik · Accepted Answer · 2013-06-13T08:57:03.557

-2

you can try this for dynamic control.

$('#id').live('click', function() {

   ----your code--

})

else you can try this:

>>>$(document).on('click','#id', function() {

   -----your code ---

   })

edited Jun 13 '13 at 08:57

answered Jun 11 '13 at 19:34

Kousik

21,485
7
36
59

2

1) Question is a duplicate. 2) `.live()` method is deprecated. – Roko C. Buljan Jun 11 '13 at 19:35
+1 for the comment @RokoC.Buljan.. But you never know what version he might be using.. – writeToBhuwan Jun 11 '13 at 19:38
@writeToBhuwan in that case we're here to be *up-to-date* and suggest what's best. `| ̭ ̭°?° ̭ ̭|` – Roko C. Buljan Jun 11 '13 at 19:50
Right.. I agree with full respect to your comment.. – writeToBhuwan Jun 11 '13 at 19:57
I'm using 1.5.2 and I unfortunately, cannot just decide to upgrade. It's outta my control. Ends up that this answer worked for me. but i appreciate what you are saying Roko – mark li Jun 11 '13 at 19:59

button created via jquery not triggering a .click event

3 Answers3