Question

我在我的页面中使用以下jquery代码：

jQuery(window).load(function(){

    jQuery('#narrow-by-list dd > ol.filter_list').each(function(){
        var FormHeight = jQuery(this).outerHeight();
        if(FormHeight > 70){
            jQuery(this).next('.layer_nav_more').css("display", "inline-block");
            jQuery(this).height(70).css("display", "block");
        }else{
            jQuery(this).height(70).css("display", "block");
        }
    });
    jQuery(".layer_nav_more").click(function(){
        jQuery(this).prev('.filter_list').animate({ height:205 }, 500, function() {
            jQuery(this).addClass("scrollable");
        });
    });

});

该页面还使用ajax调用来更新其内容，因此在刷新内容后，将忽略jquery代码。我不认为发布处理ajax的完整js文件会对你有帮助。我想以下几行应该可以让你理解正在发生的事情：

requestUrl = document.location.href
if (requestUrl.indexOf('#') >= 0) {
    var requestUrl = requestUrl.substring(0,requestUrl.indexOf('#'));
}

if (requestUrl.indexOf('?') >= 0) {
    requestUrl = requestUrl.replace('?', '?no_cache=true&');
} else {
    requestUrl = requestUrl + '?no_cache=true';
}

requestUrl = this.replaceToolbarParams(requestUrl);

this.showLoading();
new Ajax.Request(requestUrl, {
    method : 'post',
    parameters  : parameters,
    onSuccess: this.onSuccessSend.bindAsEventListener(this),
    onFailure: this.onFailureSend.bindAsEventListener(this)
});

我该怎么做才能解决这个问题？

修改我根据David的推荐更改了代码

jQuery(window).load(function(){

    function adjust_list_height(){
        jQuery('#narrow-by-list dd > ol.filter_list').each(function(){
            var FormHeight = jQuery(this).outerHeight();
            if(FormHeight > 70){
                jQuery(this).next('.layer_nav_more').css("display", "inline-block");
                jQuery(this).height(70).css("display", "block");
            }else{
                jQuery(this).height(70).css("display", "block");
            }
        });
    }

    adjust_list_height();

    jQuery(document).on('click', '.layer_nav_more', function(){
        jQuery(this).prev('.filter_list').animate({ height:205 }, 500, function() {
            jQuery(this).addClass("scrollable");
        });
    });

});

Answer 1

因此刷新内容后，将忽略jquery代码

不，不是。它显然不会被自动重新调用，但为什么会这样呢？您发布的处理程序是针对窗口的加载事件。除非您再次加载窗口，否则我不希望代码再次执行。

听起来像问题是，在您向现有元素添加click处理程序后，您需要向页面添加新元素。请记住handlers are attached to elements, not to selectors。因此，如果执行此代码时某个特定元素不存在，则不会获得单击处理程序。

标准方法是将处理点击事件推迟到父元素。任何常见的父元素都可以，只要它在页面生命周期内不被删除/替换。 document通常用于此目的，但任何父div或类似的东西都可以正常使用。像这样：

jQuery(document).on('click', '.layer_nav_more', function(){
    //...
});

这样做是将实际的点击处理程序附加到document而不是匹配的.layer_nav_more元素。当任何元素调用单击时，该事件将向上传播通过父元素并调用它们上的任何单击处理程序。当它到达document上的这个处理程序时，jQuery将使用该第二个选择器过滤原始元素。因此，这将有效处理来自.layer_nav_more元素的任何点击。

当您在逻辑上需要时，需要重新调用页面内容更改时需要调用的任何其他功能（除了可委托事件处理程序之外的功能）。例如，对您正在执行的一系列元素执行.each()。没有办法推迟＆＃34;因此，您希望将其封装在自己的函数中，并在需要重新调用该逻辑时简单地执行该函数。

Jquery window.load函数和Ajax调用

1 个答案: