doupai6875 2018-01-29 04:36
浏览 508
已采纳

在动态生成的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);
        }
    });
});

展开全部

  • 写回答

2条回答 默认 最新

  • dongqiang5541 2018-01-29 04:55
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥30 在CodBlock上用c++语言运行
  • ¥15 求C6748 IIC EEPROM程序固化烧写算法
  • ¥50 关于#php#的问题,请各位专家解答!
  • ¥15 python 3.8.0版本,安装官方库ibm_db遇到问题,提示找不到ibm_db模块。如何解决?
  • ¥15 TMUXHS4412如何防止静电,
  • ¥30 Metashape软件中如何将建模后的图像中的植被与庄稼点云删除
  • ¥20 机械振动学课后习题求解答
  • ¥15 IEC61850 客户端和服务端的通讯机制
  • ¥15 MAX98357a(关键词-播放音频)
  • ¥15 Linux误删文件,请求帮助
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部