jQuery将事件绑定到循环中的动态事件

我在循环中生成一些元素并将它们附加到div

for (property in selectedGroup.properties) {
$d("<tr></tr>").html("<label for='" + property + "_input'>" + property + "</label><input     
id='" + property + "_input' type='text' value='" + selectedGroup.properties[property] +   
"'><input type='button' id='" + property + "_button' value='Save'/>").appendTo($d("  
[id$='data-menu']"));
....

这一切都是在循环中发生的。之后，所有元素都被创建并可见，但只有循环中最后创建的元素具有正确的eventhandler。所有其他元素都有触发最后一个元素事件的事件处理程序。为什么?

这是两个绑定，第一个用于输入字段，第二个用于按钮：

$d("#" + property + "_input").keyup(function(event) {
        if (event.keyCode == 13) {
            $d("#" + property + "_button").click();

        } else {
            $d("#" + property + "_input").css('background-color', '#FF6A6A');
        }
    });

    $("#" + property + "_button").click(function(event) {

        selectedGroup.properties[property] = $d("#" + property + "_input").val();
        $d("#" + property + "_input").css('background-color', '#FFFFFF');
        $d("#" + property + "_input").blur();
    });

---

非常感谢…………但我现在有另一个问题：-（……在单击函数中，我将属性设置为输入字段的值。循环中的每一步属性当然都不同。在小提琴中，首先是类型，然后是名称，然后是标签。但是当我选择“selectedGroup.properties[property]=$d（this.）（'input:first'）.val（）；“它总是设置标签，这意味着属性总是被解释为“label”…

您可以在循环完成后这样做

for (property in selectedGroup.properties) {
$d("<tr></tr>").html("<label for='" + property + "_input'>" + property + "</label><input     
id='" + property + "_input' type='text' value='" + selectedGroup.properties[property] +   
"'><input type='button' id='" + property + "_button' value='Save'/>").appendTo($d("  
[id$='data-menu']"));
....




$d(".property").keyup(function(event) {
    if (event.keyCode == 13) {
        $d(this).click();

    } else {
        $d(this).css('background-color', '#FF6A6A');
    }
});

for（selectedGroup.properties中的属性）{
$d（“”.html（“+property+”）.appendTo（$d（“”）
[id$='data-menu']”）；
....
$d（“.property”）.keyup（函数（事件）{
如果（event.keyCode==13）{
$d（这个）。单击（）；
}否则{
$d（this）.css（'background-color'，'#FF6A6A'）；
}
});

---

这是一个有效的演示：

我建议您也将类添加到您添加了变量id

属性的元素中

for (property in selectedGroup.properties) {
$d("<tr></tr>").html("<label for='" + property + "_input'>" + property + "</label><input class='property' id='" + property + "_input' type='text' value='" + selectedGroup.properties[property] +  "'><input class='property' type='button' id='" + property + "_button' value='Save'/>").appendTo($d("[id$='data-menu']"));

但每个属性元素都有其输入字段和按钮。因此，如果我单击按钮，它必须更改相应输入字段的颜色。如果所有这些元素都具有相同的类别，如何区分这些元素？@user2934052:更新了答案。到目前为止，第一个输入有效，第二个无效。它不会更改相应输入的颜色，也不会设置“selectedGroup.properties[属性]”使用输入字段的值。@user2934052:您可以创建小提琴吗？或者共享您得到的错误。我更新了小提琴，现在它可以向您显示问题了循环中最后创建的属性元素具有正确的绑定，但所有其他元素都绑定到最后一个？？？
for (property in selectedGroup.properties) {
$d("<tr></tr>").html("<label for='" + property + "_input'>" + property + "</label><input class='property' id='" + property + "_input' type='text' value='" + selectedGroup.properties[property] +  "'><input class='property' type='button' id='" + property + "_button' value='Save'/>").appendTo($d("[id$='data-menu']"));

 $d(document).on('keyup','.property[type="text"]',function(event) {
    if (event.keyCode == 13) {
        $d(this).click();

    } else {
        $d(this).css('background-color', '#FF6A6A');
    }
});

$d(document).on('click', '.property[type="button"]', function(event) {
        properties[$d(this).attr('id').replace("_button","")]=$d(this).siblings('input:first').val();
        $d(this).siblings('input:first').css('background-color', '#FFFFFF');
         $d(this).siblings('input:first').blur();
});