jQuery的访问来自串

Question

创建的元素我已经定义和创建表<input>元素与IDS像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!"); 
     } 
    }); 
} 

Answer 1

增量属性绝不是一个好主意，主要是因为它会导致像上面这样的问题，并且还因为它们是一个难以维护的问题。使用一个类来对这些元素进行分组，而这正是为什么类设计的。另外，因为这些元素在页面加载后被动态添加，所以您需要使用委托事件。试试这个：

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 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

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