Javascript弹出窗口不适用于下一页分页

2019-08-23 22:31:24 阅读：163 来源： 互联网

我使用PHP和Javascript构建了一个像数据视图的项目.在我的页面上,它通过使用分页有一个用户表.每行都有删除按钮.当我在第一页上单击该按钮时,它正常工作.当我在下一页的每一行点击删除按钮时,看起来弹出停止工作了.下面是我的代码：

用于运行弹出窗口的Javascript：

$(".mb-control").on("click",function(){
        var box = $($(this).data("box"));
        if(box.length > 0){
            box.toggleClass("open");

            var sound = box.data("sound");

            if(sound === 'alert')
                playAudio('alert');

            if(sound === 'fail')
                playAudio('fail');

        }        
        return false;
    });
    $(".mb-control-close").on("click",function(){
       $(this).parents(".message-box").removeClass("open");
       return false;
    });

用于删除按钮的PHP脚本中的HTML(在函数中 – $i是每行唯一id的变量)

<?php

echo "<td>
	
	<button class='btn btn-warning mb-control btn-sm' href='./function/liststaff.remove.php?remove=".$getdata['username']."' data-box='#message-box-warning".$i."'>Remove <i class='glyphicon glyphicon-remove-circle'></i></button></a>
																
	<div class='message-box message-box-warning animated fadeIn' id='message-box-warning".$i."'>
	<div class='mb-container'>
	<div class='mb-middle'>
	<div class='mb-title'><span class='fa fa-warning'></span> Warning</div>
	<div class='mb-content'>
	<p>Are you sure want to delete user  <strong>".$getdata['username']." </strong>?.</p>                  
	</div>
	<div class='mb-footer'>
	<div class='pull-right'>
	<a href='index.php?delete=".$getdata['id']."' class='btn btn-success btn-lg'>Yes</a>
	<button class='btn btn-default btn-lg mb-control-close'>No</button>
	</div>
	</div>
	</div>
	</div>
	</div>
																
	</td>";

?>

请帮忙.

解决方法:

尝试在动态创建的元素上绑定click事件,如下面的第二页BUTTONS,类名称mb-control不存在于DOM上,因此事件仅附加到现有元素.

希望它能帮到你.

 $("body").on("click",".mb-control-close",function(){
       $(this).parents(".message-box").removeClass("open");
       return false;
    });

$("body").on("click",".mb-control",function(){
        var box = $($(this).data("box"));
        if(box.length > 0){
            box.toggleClass("open");

            var sound = box.data("sound");

            if(sound === 'alert')
                playAudio('alert');

            if(sound === 'fail')
                playAudio('fail');

        }        
        return false;
    });

标签：javascript,php,jquery,pagination
来源： https://codeday.me/bug/20190823/1701689.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Javascript弹出窗口不适用于下一页分页