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