如何使用jquery/javascript处理来自多个动态创建的锚标签的onclick事件？

Question

我有多个动态创建的锚标签作为按钮.当点击这些按钮中的任何一个时,我想调用位于另一个文件中的单个javascript函数,这将完成其余的有趣工作.我的问题是我无法通过'onclick'事件正确调用该函数,所以我试图找到解决方法,但对我来说这并不是那么简单.

我尝试了很多不同的方法,所以我理解这种方法的一些限制:

使用Javascript的标准HTML锚点:

<a href=#" onclick="doSomething(parameter1, parameter2, ...);">Button</a>

这不会有帮助,因为存在同步问题,我发现href将在上面选择,几乎总是我找到了.我真的很喜欢这种方式工作,如果你知道任何解决方法,请告诉我.

通过JQuery绑定:

$(document).ready(function() {
     $("#button_id").click(function() {
         doSomething(parameter1, parameter2, ...);
     });
});

我的绑定问题是,当页面加载时,我有一个函数从数据库中获取数据并将其显示在列表中.每个列表元素都有一个按钮,"点击"将调用一个javascript函数,根据我需要从list元素中提供的任何数据传递参数,然后它将执行某些操作.

我知道为了使Binding工作正常,每个按钮都应该有自己的ID,这样就很容易将它们与Binding方法联系起来.但是,我不知道如何告诉.click函数我有多少ID,也不知道如何给它这些参数(除非我通过调用其他JS函数通过按钮ID捕获它们).

任何建议/想法都非常感谢!

编辑:我如何将button_data添加到'doSomething(参数)的参数;' 功能？

list_element = '<span class="ui-li-count" data-mini="true">' + button_data + '<a href="#" class="my_button">Button</a>';</span>

请记住,这些数据是从数据库动态获取的,并在首次加载页面时发布到网站上.

Answer 1

没有必要使用id这个.这与您需要做的事情相反,因为您提供了一组元素相同的功能.相反,你应该给他们一个class分组:

<a href=#" class="my-button">Button</a>

和JavaScript:

$(document).ready(function() {
     $('body').on('click', '.my-button', function() {
         doSomething(parameter1, parameter2, ...);
     });
});

这会将click事件绑定到所有.my-button元素,甚至是尚未创建的元素.替换body为包含所有按钮的父元素,以使此工作更快一些.