Question

我的项目是C＃MVC。

我有一张桌子，其最后一行包含一个带有＆＃39;添加＆＃39;的下拉列表。按钮。点击“添加＆＃39;按钮，通过JQuery将一行添加到表中。这很好。

添加的部分行是＆＃39;删除＆＃39;我想用来删除行的按钮。

奇怪的是，＆＃34;删除＆＃34;按钮的点击事件没有被JQuery选中。它与＆＃34;添加＆＃34;完全相同。按钮，只是具有不同的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");
    });

Answer 1

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

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

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

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

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

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

然后您可以将jQuery代码更改为：

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

Answer 2

尝试使用实时功能

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

jquery：按钮单击事件未触发

2 个答案: