Javascript 动态添加jQuery事件

我正在尝试动态添加按钮，并添加一个jQuery来监听它们。 然而，我在Javascript的作用域方面遇到了麻烦（至少我认为是这样）

这几乎是我的代码

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + item);
    });
}

for（组中的变量项）{
$（'div'）。追加（“”）；
$（'#id'+项）。单击（函数（）{
警报（“Hello from”+项）；
});
}

现在的问题是，无论单击哪个按钮，事件回调中的警报始终使用最后一项

现在我明白了为什么会发生这种情况（好吧，大概是：p），但我如何才能解决它呢

---

谢谢

我希望使用jQuery委托函数

---

将事件处理程序附加到容器的。容器中的所有元素事件都会慢慢流到容器中，如果被处理，将触发事件处理程序。

我会考虑使用jQuery委托函数

---

将事件处理程序附加到容器的。容器中的所有元素事件都会慢慢流到容器中，如果被处理，将触发事件处理程序。

正确实现这一点的一种方法如下

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    (function(item){
       $('#id' + item).click(function() {
          alert("Hello from " + item);
       });
    })(item);
}

for（组中的变量项）{
$（'div'）。追加（“”）；
（职能（项目）{
$（'#id'+项）。单击（函数（）{
警报（“Hello from”+项）；
});
})（项目1）；
}

---

下面是一个jsfiddle演示

正确实现这一点的方法如下

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    (function(item){
       $('#id' + item).click(function() {
          alert("Hello from " + item);
       });
    })(item);
}

for（组中的变量项）{
$（'div'）。追加（“”）；
（职能（项目）{
$（'#id'+项）。单击（函数（）{
警报（“Hello from”+项）；
});
})（项目1）；
}

下面是一个JSFIDLE来演示它对我来说是有效的：但是我确实改变了你的处理程序以使用闭包

var group = ['asdf', 'rere', 'eeeee']

$(document).ready(function() {
    for (var item in group) {
        $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
        $('#id' + item).click((function(item) {
            return function() {
                alert("Hello from " + item);
            }
        })(item));
    }
});

var组=['asdf'，'rere'，'eeeee']
$（文档）.ready（函数（）{
对于（组中的var项目）{
$（'div'）。追加（“”）；
$（“#id”+项目）。单击（（功能（项目）{
返回函数（）{
警报（“Hello from”+项）；
}
})(项目);；
}
});

它对我很有效：但我确实将您的处理程序更改为使用闭包

var group = ['asdf', 'rere', 'eeeee']

$(document).ready(function() {
    for (var item in group) {
        $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
        $('#id' + item).click((function(item) {
            return function() {
                alert("Hello from " + item);
            }
        })(item));
    }
});

var组=['asdf'，'rere'，'eeeee']
$（文档）.ready（函数（）{
对于（组中的var项目）{
$（'div'）。追加（“”）；
$（“#id”+项目）。单击（（功能（项目）{
返回函数（）{
警报（“Hello from”+项）；
}
})(项目);；
}
});

简单方法：传递一些：

简单的方法：传递一些：

---

除了在

alert（）

语句中使用

item

变量外，我认为代码中的一切都是正常的

由于警报在for循环完成后很长时间内运行，因此警报将看到项目的最后一个值，而不是您想要的值。如果您只想访问当前单击的items ID，那么您可以从

this

引用中获取该ID，而不是将其传入。尝试将代码更改为：

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + this.id.slice(2));
    });
}

for（组中的变量项）{
$（'div'）。追加（“”）；
$（'#id'+项）。单击（函数（）{
警报（“Hello from”+this.id.slice（2））；
});
}

---

在这个jsFiddle中工作：

我认为您的代码中除了在

alert（）

语句中使用

item

变量外，其他一切都正常

由于警报在for循环完成后很长时间内运行，因此警报将看到项目的最后一个值，而不是您想要的值。如果您只想访问当前单击的items ID，那么您可以从

this

引用中获取该ID，而不是将其传入。尝试将代码更改为：

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + this.id.slice(2));
    });
}

for（组中的变量项）{
$（'div'）。追加（“”）；
$（'#id'+项）。单击（函数（）{
警报（“Hello from”+this.id.slice（2））；
});
}

---

在此JSFIDLE中工作：

您可以使用jQuery的$。每个方法都以相同的方式迭代组数组，但这将为您解决问题：

    $.each(group,function(i,v){
        $('div').append("<input type='button' value='" + v + "' id = 'id" + v + "'>");
        console.log($('#id' + v))
        $('#id' + v).click(function() {
            alert("Hello from " + v);
        });
    });

$。每个（组、功能（i、v）{
$（'div'）。追加（“”）；
console.log（$（'#id'+v））
$（'#id'+v）。单击（函数（）{
警报（“你好来自”+v）；
});
});

---

您可以使用jQuery的$。每个方法以相同的方式迭代组数组，但这将为您解决问题：

    $.each(group,function(i,v){
        $('div').append("<input type='button' value='" + v + "' id = 'id" + v + "'>");
        console.log($('#id' + v))
        $('#id' + v).click(function() {
            alert("Hello from " + v);
        });
    });

$。每个（组、功能（i、v）{
$（'div'）。追加（“”）；
console.log（$（'#id'+v））
$（'#id'+v）。单击（函数（）{
警报（“你好来自”+v）；
});
});

---

以上大多数答案都是正确的，但是。“这”是你的朋友

for (item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + this.id.slice(2) );
    });
}

for（组中的项目）{
$（'div'）。追加（“”）；
$（'#id'+项）。单击（函数（）{
警报（“Hello from”+this.id.slice（2））；
});
}

以上大多数答案都是正确的，但是。“这”是你的朋友

for (item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + this.id.slice(2) );
    });
}

for（组中的项目）{
$（'div'）。追加（“”）；
$（'#id'+项）。单击（函数（）{
警报（“Hello from”+this.id.slice（2））；
});
}

哈门

为什么不使用jquery的live函数呢

它允许您使用jquery选择器将函数绑定到一组对象上的事件，就像$（“#button”）一样。click（）可以，但也允许将来附加的新元素也可以用于click事件。这将符合您的动态需求

请参见下面的示例。我使用live函数将click事件绑定到属于类“testButton”的所有元素。然后使用$（this）上的attr（'value'）获取值，因为这是单击的元素

var group = ["Test 1", "Test 2", "Test 3"];

     for (var item in group) {
         $('div').append("<input class='testButton' type='button' value='" +item+ "'>");  
     }

     $('.testButton').live('click', function(e) {
           alert('Hello Im From ' + $(this).attr('value'));
      });

var组=[“测试1”、“测试2”、“测试3”]；
对于（组中的var项目）{
$（'div'）。追加（“”）；
}
$（'.testButton'）.live（'click'，函数（e）{
警报（'Hello Im From'+$（this.attr（'value'））；
});

Jquery Live函数：

工作示例：

希望有帮助。

哈门

为什么不使用jquery的live函数呢

它允许您将函数绑定到一组对象上的事件