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

Question

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

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

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

Answer 1

Codeparadox 的答案适用于一般情况，但始终将相同的值传递给 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，请随意忽略这一点稍后在您的代码中。)