Jquery window.load函数和Ajax调用

Jquery window.load function and Ajax call

本文关键字：Ajax 调用 函数 window load Jquery      更新时间：2023-09-26

我在页面中使用以下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");
        });
    });
});

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

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

这听起来像问题是，在向现有元素添加click处理程序之后，您正在向页面添加新元素。请记住，处理程序附加到元素，而不是选择器。因此，如果在执行此代码时某个特定元素不存在，它就不会得到点击处理程序。

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

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

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

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

相关文章：