在动态生成的php按钮上绑定事件

问题描述：

I have a simple table that manages a list of user created posts. Inside the table, I have two buttons that are supposed to manage the edit or the deletion of the single posts.

I have a problem with these buttons, when I try to edit one entry that isn't the first one listed, no actions occur. How i can manage this? I know that every button need an unique id, but i can't figure out how to fix this because the buttons are dynamically generated with a php for() loop.

<tbody>
    <? for($n=0;$n<count($load);$n++): ?>
    <tr>
    <th scope="row"><? echo $n; ?></th>
        <td class="postListTitle"><? echo $load[$n]['post_title']; ?></td>
        <td id="postListDate"><? echo $load[$n]['post_date']; ?></td>
        <td class="button-group"><button class="btn btn-warning btn-sm" id="btn-edit-post">Edit</button><button class="btn btn-danger btn-sm" id="btn-delete-post">Delete</button></td>
    </tr>
    <? endfor; ?>
</tbody>

Jquery code:

$('#btn-edit-post').on('click',function(e){
    e.preventDefault();
    var postTitle = $('.postListTitle').html();

    $.ajax({
        url:'system/ajax/doPost.php?title='+encodeURIComponent(postTitle),
        type:'GET',
        cache: false,
        success: function(item){
            var post = JSON.parse(item);

            $('#edit-title').attr('value',post.title);
            $('#edit-text').append(post.text);
        }
    });
});

我有一个简单的表来管理用户创建的帖子列表。在桌子内部，我有两个按钮，用于管理单个帖子的编辑或删除。 p>

我遇到这些按钮的问题，当我尝试编辑一个不是第一个列出的条目时，不会发生任何操作。我怎么能管理这个？我知道每个按钮都需要一个唯一的ID，但我无法弄清楚如何解决这个问题，因为按钮是用php for（） code>循环动态生成的。 p>

 ＆lt; tbody＆gt; 
＆lt;？  for（$ n = 0; $ n＆lt; count（$ load）; $ n ++）：？＆gt; 
＆lt; tr＆gt; 
＆lt; th scope =“row”＆gt;＆lt;？  echo $ n;  ？＆gt;＆lt; / th＆gt; 
＆lt; td class =“postListTitle”＆gt;＆lt;？  echo $ load [$ n] ['post_title'];  ？＆gt;＆lt; / td＆gt; 
＆lt; td id =“postListDate”＆gt;＆lt;？  echo $ load [$ n] ['post_date'];  ？＆gt;＆lt; / td＆gt; 
＆lt; td class =“button-group”＆gt;＆lt; button class =“btn btn-warning btn-sm”id =“btn-edit-post”＆gt;编辑＆lt; / 按钮＆gt;＆lt; button class =“btn btn-danger btn-sm”id =“btn-delete-post”＆gt;删除＆lt; / button＆gt;＆lt; / td＆gt; 
＆lt; / tr＆gt; 
＆lt;？  ENDFOR;  ？＆gt; 
＆lt; / tbody＆gt; 
  code>  pre> 
 
  Jquery代码： p> 
 
 
  $（'＃btn-edit  -post'）。on（'click'，function（e）{
 e.preventDefault（）; 
 var postTitle = $（'。postListTitle'）。html（）; 
 
 $ .ajax（{  
 url：'system / ajax / doPost.php？title ='+ encodeURIComponent（postTitle），
 type：'GET'，
 cache：false，
 success：function（item）{
 var post =  JSON.parse（item）; 
 
 $（'＃edit-title'）。attr（'value'，post.title）; 
 $（'＃edit-text'）。append（post.text）  ; 
} 
}）; 
}）; 
  code>  pre> 
  div>

答

First thing you need to understand is that all your button have the same ID which is btn-edit-post and btn-delete-post an ID attribute must be unique, therefore you need to create the ID's dynamically.Like this

<button class="btn btn-warning btn-sm" id="edit_<?=$load[$n]['post_id']?>">Edit</button>
<button class="btn btn-danger btn-sm" id="delete_<?=$load[$n]['post_id']?>">Delete</button></td>

See the ID is dynamically for the edit make the id edit_(PoSTID) for the delete make it delete_(POSTID)

Then on your jquery

<script type="text/javascript">
            $('[id^="edit_"]').on('click',function(){
            var id = $(this).attr('id').split("_")[1]; //get the post ID

            //continue what you need.

        });
        </script>

delete

<script type="text/javascript">
            $('[id^="delete_"]').on('click',function(){
            var id = $(this).attr('id').split("_")[1]; //get the post ID

            //continue what you need.

        });
        </script>

答

You need to bind the selector to a static element.

$(document).on('click','#btn-edit-post', function(e){
    ...
});

Also I agree with the comment, if you have multiple rows that have the buttons share with the same id, you better switch to use class instead.

在动态生成的php按钮上绑定事件

相关推荐