为什么单击此 JQuery 脚本中的按钮时此单击事件不起作用？

Question

我很久没有使用JQuery 了，今天我发现了一些问题。 我正在使用一个非常旧的 JQuery 版本 (3.0.0)，但我无法更新它。

所以我的问题是在我的 HTML 代码中我有这样的按钮：

<button class="btn-link js-delete" data-customer-id="1">Delete</button>

然后这是我的 JQuery 脚本：

$("#customers").click(".js-delete", function () {
    alert("CLICK !!!");
});

这是我的 JSFiddle： https ://jsfiddle.net/AndreaNobili/xpvt214o/906659/

问题是点击按钮没有任何反应

我该如何尝试解决这个问题？

Answer 1

您缺少将该button包装在id值为customers的元素中：

 $("#customers").click(".js-delete", function() { alert("CLICK !!!"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='customers'> <button class="btn-link js-delete" data-customer-id="1">Delete</button> </div>

但是建议的方法是直接使用该按钮的类，如果该类对于该按钮是唯一的，并且该 JS 代码将仅用于该按钮：

 $(".js-delete").click(function() { alert("CLICK !!!"); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn-link js-delete" data-customer-id="1">Delete</button>

Answer 2

尝试这个：

<button class="btn-link js-delete" data-customer-id="1">Delete</button>



$(".js-delete").click(".js-delete", function () {
    alert("CLICK !!!");
});

您的代码选择带有 #costumers 而不是您的按钮的元素，因为它与客户没有 id

Answer 3

这种情况下的选择器是“.js-delete”。 首先，您需要调用选择器而不是事件。

$(".js-delete").click(function () {
    alert("CLICK !!!");
});

Answer 4

您通过 ID (#customer) 调用了该元素，但 Button 中没有 ID 属性。 用这个替换按钮元素：删除

Answer 5

你忘了给按钮id="customers" 。