1

我已经在表格中定义并创建了带有, , ...<input>等 id 的元素id="value0"id="value1"

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!");
        }
    });
}
4

4 回答 4

2

由于输入是动态添加的，因此您需要使用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!");
    }
});
于 2013-10-24T08:50:09.887 回答
1

这是因为闭包变量范围问题...在这种情况下，您可以使用它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!");
        }
    });
}
于 2013-10-24T08:48:26.347 回答
1

增量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!");}
    });
}
于 2013-10-24T08:49:05.223 回答
1

这里的元素是在页面加载后创建的，因此事件不会与这些元素绑定。
使用.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!");}
    });
}
于 2013-10-24T08:51:45.827 回答