You need to enable JavaScript to run this app. jQuery配置OR条件点击委托失效,点击刷新按钮不触发Ajax调用
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.11.11 01:54:05