Question

我正在尝试将click事件绑定到动态生成的表单列表中附加到每个表单的按钮。下面有一个简化版本。每个表单都有，删除，编辑，保存和取消按钮。应该从头开始隐藏保存和取消按钮。按下编辑按钮时，应显示保存和取消按钮，但仅适用于按下按钮的表单。应隐藏表中显示的值，并替换为输入元素。

data

我坚持使用java脚本来实现这一目标。如果只有一个表格，那就像下面的代码一样。你会怎么做，所以它适用于生成的所有表格???

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

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_"，而不是id使用class。然后它会工作。

HTML

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

Jquery代码

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

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

});

动态生成的元素上的jquery click事件

2 个答案: