Button click event not triggering

Question

My project is C# MVC.

I have a table whose last row contains a dropdownlist with an 'Add' button. On clicking the 'Add' button, a row is added to the table via JQuery. This works fine.

Part of the row that is added is a 'Remove' button that I want to use to delete the row.

Strange thing is, the "Remove" button's click event is not being picked up by JQuery. It is exactly the same as the "Add" button, just with a different ID. Anyone know why this would be so? Code below.

    $('#AddBuyCondition').click(function () {
        alert("abc");
        var conditionID = +$("#BuyConditionList").val();
        var conditionText = $("#BuyConditionList").find('option:selected').text();
        $('#BCDropDownRow').before('<tr><td>' + conditionText + '</td><td><button id="RemoveBuyCondition" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-minus"></span></button></td></tr>');
    });

    $('#RemoveBuyCondition').click(function () {
        alert("rbc");
    });

Felix · Accepted Answer · 2014-03-20 07:14:51Z

5

You need to use event delegation here since your button has been added dynamically to the DOM:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

$('#BuyConditions').on('click', '#RemoveBuyCondition', function() {
    alert("rbc");
});

So basically in your case, event delegation will helps you to attach click event to dynamically added button element.

Also, in order to prevent duplicated id, you should use class instead of id for your button.

......'</td><td><button type="button" class="RemoveBuyCondition btn btn-default btn-xs">......

then you can change the jQuery code to:

$('#BuyConditions').on('click', '.RemoveBuyCondition', function() {
    alert("rbc");
});

edited Mar 20, 2014 at 7:14

answered Mar 20, 2014 at 7:09

Felix

38.2k8 gold badges45 silver badges56 bronze badges

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

2 Comments

Dave Tapson Over a year ago

Indeed! Thank you kindly. Just to clarify the answer, the name of the table is "BuyConditions". I changed the above answer to the below and it works fine. $('#BuyConditions').on('click', '#RemoveBuyCondition', function() { alert("rbc"); });

Dave Tapson Over a year ago

Felix has it. Just to clarify the answer, the name of the table is "BuyConditions". I changed the above answer to the below and it works fine. $('#BuyConditions').on('click', '#RemoveBuyCondition', function() { alert("rbc"); });

ankit singh · Accepted Answer · 2014-03-20 07:11:02Z

0

try by live function

$('#AddBuyCondition').live('click',function()
{ 
  alert("abc");
});

answered Mar 20, 2014 at 7:11

ankit singh

3671 gold badge3 silver badges13 bronze badges

1 Comment

Andrei V Over a year ago

The live() function is now deprecated. You should avoid using it.

Collectives™ on Stack Overflow

Button click event not triggering

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related