JQuery доступ к элементам, созданным из строки

Question

Я определил и создал <input> элементов таблицы с идентификаторами как 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>' 
    ); 
}; 

Теперь я хочу, чтобы получить доступ к этим идентификаторам. И вот проблема. Я не понимаю, почему этот код не работает:

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

Инкрементальным 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 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!");} 
    }); 
}