pjax刷新后如何处理绑定事件失效

本文探讨了在使用pjax进行页面局部刷新时,如何确保jQuery插件正确初始化。pjax虽能提升用户体验,但可能导致插件加载事件失效。文章介绍了在'pjax:end'事件中重新初始化插件的方法,并提供了示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在新页面中重新初始化插件/工具

pjax的特点是它不会刷新页面即可获取并插入新内容。但是,如果其他jQuery插件(或库)为页面内容绑定了加载事件(如DOMContentLoaded),那么这些事件是无效的。 比较常用的一种做法是,在更新的页面内容范围内,重新初始化插件。

$(document).on('ready pjax:end', function(event) {
	$(event.target).initializeMyPlugin()
})

该方法可以让$.fn.initializeMyPlugin()在页面普通加载和pjax加载时(点击链接或浏览器前进后退按钮之后)都能被调用。

详情可以参见来源文档
摘自:在新页面中重新初始化插件/工具

指定元素的刷新监听

如果你知道pjax的重新加载区域的元素,如下的触发事件来达到你的目的。这种方式,也可以处理你的对弹窗的处理

$('#pjax-container').on('pjax:send', function() {
  $('#loading').show()
})
$('#pjax-container').on('pjax:complete', function() {
  $('#loading').hide()
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值