.on() jQuery 函数在通过 AJAX 更新页面后不起作用答案

【问题标题】：.on() jQuery function not working after page updated via AJAX.on() jQuery 函数在通过 AJAX 更新页面后不起作用
【发布时间】：2014-04-30 15:11:09
【问题描述】：

此代码实质上显示隐藏的内容并在执行该功能时重新分配一个新按钮。

The problem I am having is that when pagination is selected, or the price slider is selected/used, the function is not readied again.

我的 jQuery .on() 代码在小提琴 (http://jsfiddle.net/hslincoln/Fgx7D/4/) 中运行良好，但在测试环境中运行良好 (http://jmldirect.uat.venda.com/uk/offers/icat/7offers)：

HTML：

<img class="brands-toggle" id="#brandresults" src="http://jmldirect.uat.venda.com/content/ebiz/shop/resources/images/+.png">

jQuery：

jQuery(".brands-toggle").bind( "click", function() {
    var collapse_content_selector = jQuery(this).attr('id');
    var toggle_switch = jQuery(this);
    jQuery(collapse_content_selector).toggle(function () {
        if (jQuery(this).css('display') == 'none') {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("http://jmldirect.uat.venda.com/content/ebiz/shop/resources/images/-.png","http://jmldirect.uat.venda.com/content/ebiz/shop/resources/images/+.png"));
        } else {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("http://jmldirect.uat.venda.com/content/ebiz/shop/resources/images/+.png", "http://jmldirect.uat.venda.com/content/ebiz/shop/resources/images/-.png"));
        }
    });
});

有什么建议吗？

编辑： 更改了语法以与早期版本的 jQuery 一起使用 - 使用 .bind() 而不是 .on()。

仍然是 AJAX 调用后无法重新加载的问题。

【问题讨论】：

您的 search.js 文件与 .on() 存在问题
如果您检查浏览器的控制台日志，您会发现问题：[Error] TypeError: 'undefined' is not a function (evaluating 'jQuery(document).on') global code (Search.js, line 300)。发生这种情况是因为您使用的是 jQuery v1.6.1，而 .on() 仅在 1.7 中添加。
嗯，你的 toggle() 代码看起来不对……它不应该返回一个布尔值吗？
只是一个提示：replace("jmldirect.uat.venda.com/content/ebiz/shop/resources/images/…)) 可以写成：replace("-.png","+.png"))
@HarryL - 它现在不能正常工作，因为#col-one 在选择一个选项时被替换。尝试使用不同的选择器，例如 .wpShadow（只是一个示例）。此外，您的 ajax 请求并没有替换 #content-search，它只是将其添加到当前请求中，这意味着您最终会在页面上添加多个 #content-search 元素。

标签： javascript jquery ajax

【解决方案1】：

这已被清除，.delegate() 是更合适的方法：

jQuery：

    // 1.1 Brands toggle

jQuery(".wpShadow").delegate( ".boxContent #brand", "click", function(e) {
        e.preventDefault();
    var collapse_content_selector = jQuery('#brandresults');
    var toggle_switch = jQuery(this).find('img');
        if (jQuery(collapse_content_selector).css('display') == 'none') {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("bkg-dropdown.png","bkg-dropdown-minus.png"));
        } else {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("bkg-dropdown-minus.png", "bkg-dropdown.png"));
        }   
    jQuery(collapse_content_selector).toggle();
});

【讨论】：

【解决方案2】：

尝试$('body').on 而不是$(document)/on

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
@RahilWazir 在测试环境中确实显示Uncaught TypeError: undefined is not a function