Javascript弹出窗口在下一页分页上不起作用

Question

我已经使用 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（在 while 函数中 - $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>";

?>

请帮忙。

Answer 1

我认为包含按钮的分页行无法绑定到点击事件，因为它们是动态创建的：

试试这个：

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

jsfiddle

Answer 2

对于动态内容的事件绑定，不应使用直接事件，而应使用委托事件。看看here。

Answer 3

尝试在动态创建的元素上绑定 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;
    });