jQuery 访问从字符串创建的元素

jQuery access to elements created from string

本文关键字：元素 创建 字符串 访问 jQuery      更新时间：2023-09-26

我已经在表中定义并创建了<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!");
        }
    });
}

由于输入是动态添加的，因此需要使用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!");
    }
});

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

这是因为闭包变量范围问题...在这种情况下，您可以使用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!");
        }
    });
}

这里的元素是在页面加载后创建的，因此事件不会与这些元素绑定。
使用 .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!");}
    });
}
相关文章：