Question

我已在表格中定义并创建了<input>个元素，其中包含id="value0"，id="value1"，...等ID

for(var i=0; i<result.length; i++){
     $('#development_mapping tbody').append(
        '<tr><td>'+ result[i].visual_feature+'</td> \n\
           <td><input name="data-feature_x"  id="value'+i+'"/></td>\n\
         </tr>'
     );
 };

现在我想访问这些ID。这是一个问题。我不明白为什么这段代码不起作用：

for(var i=0; i<result.length; i++){
    var tmp_index = '#value' +i; 
    $(tmp_index).keydown(function(e) { 
        if (e.keyCode === 13) {
            execute();
            console.log(tmp_index, " ok!");
        }
    });
}

Answer 1

由于输入是动态添加的，因此您需要使用event delegation来注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#development_mapping tbody').on('keydown', tmp_index, function (e) {
    if (e.keyCode === 13) {
        execute();
        console.log(this.id, " ok!");
    }
});

Answer 2

这是因为闭包变量范围问题......在这种情况下，您可以使用this.id来访问elemetn id

for (var i = 0; i < result.length; i++) {
    $('#value' + i).keydown(function (e) {
        if (e.keyCode === 13) {
            execute();
            console.log(this.id, " ok!");
        }
    });
}

Answer 3

增量id属性从来都不是一个好主意，主要是因为它会导致上述问题，也因为它们很难维护。使用类来对元素进行分组 - 它是为其设计的类。此外，因为这些元素是在页面加载后动态附加的，所以您需要使用委托事件。试试这个：

for (var i = 0; i < result.length; i++){
    $('#development_mapping tbody').append('<tr><td>'+ result[i].visual_feature+'</td><td><input name="data-feature_x" class="feature"/></td></tr>');
};

$('#development_mapping tbody').on('keydown', '.feature', function(e) { 
    if (e.keyCode === 13) {
        execute();
        console.log("ok!");}
    });
}

Answer 4

此处元素是在页面加载后创建的，因此事件不会与这些元素绑定使用 .on() 功能将事件附加到动态创建的元素上。

for(var i=0; i<result.length; i++){
   var tmp_index = '#value' +i; 
    jQuery("#development_mapping tbody").on("keydown",tmp_index,function(e) { 
                    if (e.keyCode === 13) {execute();
                    console.log(tmp_index, " ok!");}
    });
}

jQuery访问从string创建的元素

4 个答案: