使用 javascript 为每个新添加的按钮提供唯一的单击侦听器答案

【问题标题】：Unique click listener for each new added button with javascript使用 javascript 为每个新添加的按钮提供唯一的单击侦听器
【发布时间】：2018-07-24 19:05:41
【问题描述】：

我正在以这种方式在某个事件上添加动态按钮：

...

var count = 0;

var html button = '<button type="button" class="add-condition @(Model.Name) ' + count + ' btn btn-default" name="add-condition @(Model.Name)">Add</button><div class="conditions @(Model.Name) ' + count + '">'

count++;

...

事件点击监听是：

@*$(".add-condition." +  modelActivityElements.Name, $(this)).click(function (e) {

 });

我想处理动态添加的 N 个按钮的点击，但这样会触发 N 次点击。

如何处理一次点击？

【问题讨论】：

每次点击都调用同一个函数吗？
是的，但我必须传递不同的参数（点击按钮的不同名称）来处理不同的情况
将参数放在按钮的data-whatever属性中，然后用1个使用$(this).data("whatever")值的函数处理所有按钮。

标签： javascript button dynamic click listener

【解决方案1】：

您似乎正在初始化循环内的点击处理程序。而是在循环外初始化侦听器，并在事件处理程序中获取按钮特定参数。

$('.add-caption').click(function() {
   var name = $(this).attr('name') // @Model.name
   // do other stuff
});

【讨论】：

如果我在循环外初始化点击处理程序，只有第一个按钮对点击处理程序做出反应...
请用呈现的 html 更新您的问题以及您使用的是什么选择器？

【解决方案2】：

您是否在循环中添加动态按钮

【讨论】：

即使您无法发表评论，也不要将 cmets 作为答案发布。建立代表以发表评论，而不是规避规则并搞砸网站。