草庐IT

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

coder 2024-04-28 原文

我已经使用 PHP 和 Javascript 构建了一个类似数据 View 的项目。在我的页面上，它有一个使用分页的用户表。每行都有删除按钮。当我单击第一页上的该按钮时，它可以正常工作。当我单击下一页每一行的删除按钮时，弹出窗口似乎不再工作了。下面是我的代码:

用于运行弹出窗口的 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>";

?>

请帮忙。

最佳答案

尝试将点击事件绑定(bind)到动态创建的元素上，如下所示，对于 DOM 上不存在类名称 mb-control 的第二页按钮，因此该事件仅附加到现有元素。

希望对你有帮助。

 $("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 弹出窗口不适用于下一页分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41712904/

Javascript弹出3934sectionphpjquerypagination

有关Javascript 弹出窗口不适用于下一页分页的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  5. ETH 徘徊在 1,700 美元附近；下一步是什么？ - 2

    以太坊价格分析表明横盘整理，偏向中性。价格从前一交易日的高点1,791美元回落后正在盘整。但是，有趣的是，多头在1,680美元附近持有重要支撑。多头在1,700美元的心理水平附近聚集动能，并准备在接下来的几个交易日推向1,800美元。以太坊价格显示出盘整迹象，因为它形成了多个连续的顶部形态。这种回撤可能是第二大加密货币下一轮上涨的基石。以太坊连续第二个交易日走低。过去10天，价格在1,590-1,760美元的短期区间内盘整。每日烛台高于1,800美元将维持ETH的进一步上涨。ETH价格走低日线图上，以太坊价格在上升趋势线附近获得一轮支撑。来自879.80美元低点的看涨趋势线为ETH买家提供了支

  6. ruby - (Ruby || Python) 窗口管理器 - 2

    我想用这两种语言中的任何一种(最好是ruby​​)制作一个窗口管理器。老实说，除了我需要加载某种X模块外，我不知道从哪里开始。因此，如果有人有线索，如果您能指出正确的方向，那就太好了。谢谢 最佳答案 XCB，X的下一代API使用XML格式定义X协议(protocol)，并使用脚本生成特定语言绑定(bind)。它在概念上与SWIG类似，只是它描述的不是CAPI，而是X协议(protocol)。目前，C和Python存在绑定(bind)。理论上，Ruby端口只是编写一个从XML协议(protocol)定义语言到Ruby的翻译器的问题。生

  7. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise，我想添加一个方法“getAllComments”，所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时，我得到了undefinedmethod`getAllComments'for#我做错了什么？谢谢 最佳答案 因为getAllComments是一个类方法，而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  10. ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2

    我的Rails应用程序中安装了carrierwave。但是，当用户上传多页pdf时，我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗？用什么命令？这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful

随机推荐