jQuery：将变量传递给动态创建的 DOM 元素的点击处理程序答案

【问题标题】：jQuery: passing a variable to a click hander for dynamically created DOM elementjQuery：将变量传递给动态创建的 DOM 元素的点击处理程序
【发布时间】：2012-07-29 06:51:25
【问题描述】：

我正在尝试通过以下方式将事件处理程序附加到动态创建的 DOM 元素：

var createdElement = $('<a>', {
    click: function (data) {
        alert("click");
    }
});

这按预期工作，但现在我想将一个变量传递给 click 函数。任何人都可以建议如何做到这一点。

【问题讨论】：

传递变量是什么意思？

标签： jquery variables click selector dynamically-generated

【解决方案1】：

Thecodeparadox 的答案在一般情况下有效，但始终将相同的值传递给 click 处理程序，而不管触发它的 <a> 元素是什么。

如果你想让值依赖于被点击的元素，你可以在元素本身上调用on()：

var createdElement = $("<a>").on("click", {
    yourData: "something"
}, function(event) {
    alert("Data is " + event.data.yourData);
}).appendTo("body");

但是，上面的代码使用的语法与您问题中的语法不同。如果您想在属性/事件映射中继续定义click 处理程序，您可以使用data() 将值与元素一劳永逸地关联：

var createdElement = $("<a>", {
    click: function() {
        alert("Data is " + $(this).data("yourData"));
    }
}).data("yourData", "something").appendTo("body");

（请注意，我添加了对 appendTo("body") 的调用，因此新元素成为 DOM 的一部分，并且 click 事件有机会被触发。如果您将元素添加到 DOM，请随意忽略这一点稍后在您的代码中。）

【讨论】：

感谢 Frédéric，这正是我所需要的。你能推荐一些关于jQuery语法的好教程吗？
@Ben，文档有一个Tutorials 部分。你检查了吗？
谢谢，我不敢相信我错过了。我去看看。