为何jQuery点击函数失效？网格视图加号展开功能异常求助

嘿，我明白你的困扰——点击GridView里的加号图片没法展开对应的内容，代码跑不起来对吧？咱们来拆解问题、一步步修复它～

你的代码里的核心问题 #

1. live()方法已被弃用：jQuery在1.7版本就弃用了live()，1.9+直接移除了这个方法，动态元素的事件绑定得用on()做事件委托才行。
2. 折叠逻辑未完成：你贴的代码里，减号点击事件的closest(...)后面没写完，没法正确找到并移除展开的行。
3. 动态修改元素后的事件捕获问题：直接给[src*=minus]绑定事件的话，切换图片src后新的减号元素不会触发事件，必须用事件委托才能捕获动态变化的元素。

修正后的完整代码 #

// 绑定到GridView的父级静态元素（这里假设GridView生成的table id是gridTable，换成你实际的选择器）
$("#gridTable").on("click", "[src*='plus']", function () {
    const $currentImg = $(this);
    // 插入展开行，给展开行加类名方便后续精准移除
    $currentImg.closest("tr").after(`<tr class="expanded-row"><td></td><td colspan="999">${$currentImg.next().html()}</td></tr>`);
    // 切换为减号图标
    $currentImg.attr("src", "images/minus.png");
});

$("#gridTable").on("click", "[src*='minus']", function () {
    const $currentImg = $(this);
    // 找到当前行后面的展开行并移除
    $currentImg.closest("tr").next(".expanded-row").remove();
    // 切换回加号图标
    $currentImg.attr("src", "images/plus.png");
});

额外注意事项 #

• 用静态父元素做事件委托：尽量选择离目标元素最近的静态父元素（比如GridView的table），比绑定到body更高效，也能避免不必要的事件冒泡。
• 精准匹配图片src：如果你的图片是绝对路径，建议用[src$='plus.png']（匹配后缀）来替代[src*='plus']，避免误匹配其他包含"plus"字符串的资源。
• 确保展开内容的元素存在：$(this).next()必须是一个包含展开内容的隐藏元素（比如<div style="display:none;">你的展开内容</div>），这样才能正确获取到内容插入到新行里。
• colspan值要正确：colspan='999'虽然能适配大部分情况，但最好改成你GridView实际的列数，避免布局错乱。

内容的提问来源于stack exchange，提问作者Al-Amin Suzan