событие jquery click на динамически сгенерированном элементе

Question

Я пытаюсь связать событие click с кнопками, прикрепленными к каждой форме в динамически сгенерированном списке форм. Ниже приведен упрощенный вариант. каждая форма будет иметь, удалять, редактировать, сохранять и отменить кнопки. Кнопки сохранения и отмены должны быть скрыты с самого начала. Когда кнопка редактирования нажата, кнопки сохранения и отмены должны отображаться, но только для нажатия кнопки формы. Значение, показанное в таблице, должно быть скрыто и заменено замененным на элемент ввода.

$count = 0; 
$content = ''; 
$array = array('car', 'dog', 'plane'); 
foreach ($array as $value){ 

    $content .=" 

     <form id='form' method='post'> 
     <div class='list'> 
      <table> 
      <tr> 
       <td style='font-weight: bold;'>Program</td> 
       <td class='value_$count'>$value</td> 
       <td class='edit_value_$count'><input name='value' type='text' id='value' value='$value'></td> 
      </tr> 
      </table> 
      <input name='delete' action='' type='submit' id='delete' value='Delete'> 
      <input name='save' action='' type='submit' id='save' value='Save'> 
      <button id='edit_$count'>Edit</button> 
      <button id='cancel_$count'>Cancel</button> 
     </div> 
    </form> 
"; 
$count++; 
} 

echo $content; 

Я застрял на скрипте java, чтобы это произошло. Это было бы похоже на код ниже, если бы была только одна форма. Как бы вы это сделали, чтобы применить все формы?

$("#edit_").show(); 
$("#cancel_").hide(); 
$("#save").hide(); 
$(".edit_value_").hide(); 
$(".value_").hide(); 

$("#edit_").click(function(){ 

    $("#edit_").hide(); 
    $("#save").show(); 
    $("#cancel_").show(); 
    $(".edit_value_").show(); 
    $(".value_").hide(); 

}); 

Answer 1

Вам необходимо обновить код из

$("#edit_").click(function(){ 
     .... 
}); 

в

$(document).on("click", '[id^="edit_"]', function(){ // binding click event to all those elements having id starting with edit_ 
     var index = $(this).attr('id').split("_")[1]; // extracting the counter from id attribute of edit button 
     $("#cancel_"+index).show(); // using index 
     ......... 

}); 

Обратите внимание, что для связывания событий на динамически добавленные элементы, используйте .on.

Answer 2

Вам необходимо обновить код для id="edit_" вместо idclass. Тогда это сработает.

HTML должен

<button id='edit_$count' class="edit_">Edit</button> 

Jquery код

$(".edit_").click(function(){ 

    $(".edit_").hide(); 
    $("#save").show(); 
    $("#cancel_").show(); 
    $(".edit_value_").show(); 
    $(".value_").hide(); 

});