Jquery функция window.load и Ajax вызов

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 является игнорируются. Я не думаю, что публикация полного js-файла, который обрабатывает ajax, поможет вам. Я думаю, что следующие строки должны быть достаточно хорошо для вас, чтобы понять, что происходит:

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) 
}); 

Что я могу сделать, чтобы исправить это?

---

EDIT: Я изменил код, основанный на рекомендациях Дэвида

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 элементов.

Any Другие функции, которые необходимо вызвать при изменении содержимого страницы (функциональность, помимо обработчиков событий, способных делегировать), должны быть повторно вызваны, когда вам это логически необходимо. Например, выполнив .each() над серией таких элементов, как вы делаете. Невозможно «отложить» это, поэтому вы хотите инкапсулировать его в рамках своей собственной функции и просто выполнять эту функцию всякий раз, когда вам нужно повторно вызвать эту логику.