动态生成的元素上的 jquery 单击事件

Question

I am trying to bind a click event to buttons attached to each form in a dynamically generated list of forms. There's a simplified version below. each form will have, delete, edit, save and cancel buttons. The save and cancel buttons should be hidden from the start. When the edit button is pressed the save and cancel buttons should show but only for the form who's button was pressed. The value shown in the table should be hidden and replaced with replaced with an input element.

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

I am stuck on the java script to make this happen. It would be something like the code bellow if there was only one form. How would you do it so it applied to all the forms generated???

$("#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

You need to update your code from

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

to

$(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
       .........

});

Please note, for event binding on dynamically added elements, use .on .

Answer 2

You need to update your Code for id="edit_" instead of id use class . Then it will work.

HTML should

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

Jquery code

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

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

});