按钮点击事件未触发答案

【问题标题】：Button click event not triggering按钮点击事件未触发
【发布时间】：2014-03-20 07:09:01
【问题描述】：

我的项目是 C# MVC。

我有一个表，其最后一行包含一个带有“添加”按钮的下拉列表。单击“添加”按钮时，会通过 JQuery 在表中添加一行。这很好用。

添加的部分行是一个“删除”按钮，我想用它来删除该行。

奇怪的是，“删除”按钮的点击事件没有被 JQuery 拾取。它与“添加”按钮完全相同，只是ID不同。有谁知道为什么会这样？代码如下。

    $('#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");
    });

【问题讨论】：

标签： c# jquery asp.net-mvc jquery-events

【解决方案1】：

您需要在此处使用 event delegation，因为您的按钮已动态添加到 DOM：

事件委托允许我们将单个事件侦听器附加到父元素，将为匹配选择器的所有子元素触发，这些孩子是现在存在还是将来添加。

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

所以基本上在您的情况下，事件委托将帮助您将点击事件附加到动态添加的按钮元素。

另外，为了防止重复的id，您应该为您的按钮使用class 而不是id。

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

那么你可以把jQuery代码改成：

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

【讨论】：

确实！非常感谢你。只是为了澄清答案，表的名称是“BuyConditions”。我将上述答案更改为以下答案，效果很好。 $('#BuyConditions').on('click', '#RemoveBuyCondition', function() { alert("rbc"); });
菲利克斯有。只是为了澄清答案，表的名称是“BuyConditions”。我将上述答案更改为以下答案，效果很好。 $('#BuyConditions').on('click', '#RemoveBuyCondition', function() { alert("rbc"); });
很高兴它有帮助。顺便说一句，我已经根据您的评论更新了我的答案:-)

【解决方案2】：

通过实时函数尝试

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

【讨论】：

live() 函数现已弃用。你应该避免使用它。