Question

逻辑/编程的区别是什么？我正在回答一个重复的问题所以我尝试用一种新方法修改其中一个重复的答案（从我的观点来看，因为它看起来更长）：

for (i = 1; i <= 10; i++) {
    var btn = document.createElement("BUTTON"),
        t = document.createTextNode("123");
    btn.appendChild(t);
    btn.setAttribute("class", "xyz");
    btn.setAttribute("value", "s" + i);
    btn.appendChild(t);

    document.body.appendChild(btn);
    $(document).bind('click', btn, function () {
    //btn.addEventListener('click', function() {
        alert(this.value);
    });
}

我的“问题”是btn.addEventListener('click', function(){})正常工作：只有一个警告弹出窗口并绑定到创建的元素，$(document).bind('click', btn,function(){..})触发警报11次，并且不绑定到刚刚创建的元素。
可能是一个简单，愚蠢和无用的问题，但我很狡猾 JSFIDDLE

Answer 1

$(document).bind('click', btn, function () {

btn这里应该是一个选择器，我不认为它接受一个元素。 bind已弃用，您应使用on代替

只需$(btn).on('click', function() {

Answer 2

这也有效：

$(btn).bind('click', function () {
         alert($(this).attr("value"));
});

Answer 3

第二个选项（在你的情况下是btn）应该是CSS选择器而不是DOM节点。

所以你可以这样做

$(document).bind('click', 'button.xyz', function () {
//btn.addEventListener('click', function() {
    alert(this.value);
});

绑定事件将文档＆gt;元素和addEventListener绑定到元素

3 个答案: