jQuery配置OR条件点击委托失效,点击刷新按钮不触发Ajax调用
核心问题定位
- 你当前的代码完全混淆了jQuery
delegate方法的功能边界:$(".page-content").delegate(".refresh-smartsheet", "click")是事件绑定接口,作用是为容器下后续动态生成的、匹配.refresh-smartsheet的元素绑定点击监听,本身不返回任何表示“点击事件是否触发”的布尔值,完全不能作为if语句的判断条件使用。 - 原有写法把事件绑定动作塞到if的条件表达式里,代码执行时只会顺带着完成一次事件绑定,并没有搭建“点击按钮就执行Ajax”的触发通路,因此点击按钮无响应、控制台无报错。
正确实现方案
将空状态判断、点击事件绑定两个逻辑完全拆分,抽离公共的Ajax逻辑避免重复编码:
// 抽离统一的业务处理逻辑 function fetchSmartsheet() { // 原有代码中的Ajax调用逻辑 // 原有代码中动态生成刷新按钮的逻辑 } // 页面初始化时判断目标区域空状态,满足条件直接拉取数据 if ($('#smart_sheet_area').is(':empty')) { fetchSmartsheet(); } // 通过事件委托绑定刷新按钮的点击触发逻辑 $(".page-content").delegate(".refresh-smartsheet", "click", function(e) { // 拦截按钮默认行为(如链接跳转、表单提交),避免干扰业务逻辑 e.preventDefault(); fetchSmartsheet(); });
补充:jQuery 1.7及以上版本中,
delegate方法已被官方标记为废弃,更推荐使用on方法实现同等的事件委托效果,长期兼容性更好,对应绑定代码替换为:$(".page-content").on("click", ".refresh-smartsheet", function(e) { e.preventDefault(); fetchSmartsheet(); });
内容的提问来源于stack exchange,提问作者bacev
相关产品推荐
相关产品推荐

