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

Question

我有多个动态创建的 anchor 标记，用作按钮。单击这些按钮中的任何一个时，我想调用位于另一个文件中的单个 javascript 函数，它将完成其余有趣的工作。我的问题是我无法通过“onclick”事件正确调用该函数，因此我试图找到解决方法，但这对我来说并不那么简单。

我尝试过很多不同的方法，所以我了解这种方法的一些局限性:

带有 Javascript 的标准 HTML anchor :

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

这不会有帮助，因为存在同步问题，而且我发现 href 几乎总是在点击时在上方被选中。我真的很喜欢这种工作方式，如果您知道这里的任何解决方法，请告诉我。

通过 JQuery 绑定(bind):

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

我的绑定(bind)问题是，当加载页面时，我有一个函数可以从数据库中获取数据并将其显示在列表中。每个列表元素都有一个按钮，“单击时”将调用一个 javascript 函数，根据我需要从列表元素提供的任何数据向它传递参数，然后它会执行某些操作。

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

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

编辑: 如何将 button_data 添加到“doSomething(parameter);”的参数中功能？

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, ...);
     });
});

这会将点击事件绑定(bind)到所有 .my-button 元素，甚至是您尚未创建的元素。将 body 替换为包含所有按钮的父元素，以使这项工作更快一些。