Почему я говорю jQuery, чтобы щелкнуть по моей ссылке, замедляя мою страницу?

Question

I don't know if this is the effects of an update panel или что, но у меня в основном есть раскрывающийся список, который позволяет пользователю выбирать элемент в качестве фильтра. Когда элемент выбран, он должен вернуть только один элемент в сетку. Именно этот конкретный фильтр, скорее всего, вернет запись, которую вы ищете. Это работает отлично, если пользователь нажимает ссылку «применить» для применения фильтра. За ссылкой apply используется некоторый код на стороне сервера (C# в приложении ASP.NET Web Forms).

У нас был запрос пользователя с чем-то к эффекту:

"Why do I have to click the apply button if I make a selection in this one drop down filter...it should simply get that one record I am searching for. This helps me because I don't have to click the "Apply" button."

Я согласился с ним и думал, что это самый простой способ сделать это ... Я думал: просто, у меня будет обработчик события изменения при выпадающем списке, так что когда будет сделан выбор, я вызову событие щелчка. Что-то по этому поводу:

 $("#MainContent_ddlCompany").on("change", function() { 
      var companyId = $("#MainContent_ddlCompany").val(); 
      $("#MainContent_hdnCompanyValue").val(companyId); 
      $("#<%=ddlCompany.ClientID %>").trigger("chosen:updated"); 

      if (companyId.length > 0) { 
       $(".apply").click(); 
       $(".apply").removeClass("applyButton"); 
       $(".apply").addClass("resetButton"); 
      } else { 
       //cleared selection of a company 
       $(".apply").removeClass("resetButton"); 
       $(".apply").addClass("applyButton"); 
      } 
     }); 

На первый взгляд это не сработало, и я не мог сказать, почему, но после некоторых серьезных Googling я изменил эту строку:

$(".apply").click(); 

Для этого:

$('.apply')[0].click(); 

Это отлично поработало ... поэтому я решил проверить его еще. Поскольку я продолжал выбирать одно значение фильтра после другого, я заметил, что страница начала замедляться. Фактически к 6-му или 7-му раз он был довольно непригодным. Я не знаю, почему это происходит, но я подозреваю, что это связано с тем, что эта ссылка с именем класса .apply находится внутри панели обновления.

Но все же я подумал про себя: это было внутри панели обновления, прежде чем я изменил код jQuery, чтобы имитировать событие click. Итак, почему страница замедляется и перетаскивается с помощью этого небольшого фрагмента кода? Вызывает событие из кода jQuery, отображая что-то еще в HTML, которое может вызвать это?

Если я изменил свой код и заставил пользователя нажать кнопку Apply, мы вернемся к нормальной нормальной скорости. Почему это, если я скажу jQuery, чтобы имитировать нажатие кнопки, моя страница замедляется? Он делает то же самое, имитация щелчка этой кнопки ссылки вызывает его метод кода на стороне сервера, будет ли пользователь нажимать на него или у меня есть jQuery.

На данный момент я не понимаю, почему это происходит, потому что эта кнопка находится в панели обновления в любом случае, но когда у меня есть jQuery, щелкните по ней через $('.apply')[0].click();, страница замедляется после нескольких попыток. Но когда у меня есть пользователь, просто нажмите эту кнопку (без события jQuery click), тогда он отлично работает?

Что мне здесь не хватает?

Answer 1

Ух, ну, я нашел свою проблему. Поскольку я использовал обновления, мне пришлось обернуть код jQuery, чтобы включить add_endRequest. То есть у вас есть что-то в виду:

$(document).ready(function() { 

    //Some initial event/triggers 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(function() { 
     //Copy of some initial event/triggers 
    }); 
}); 

Почему я использую endRequest, который вы спрашиваете? Ну, потому что обновляемые панели в основном отбрасывают все ваши события после асинхронной обратной передачи, потому что HTML в этот момент (после обновления) снова отображается и в этот момент все события, связанные с любым элементом управления внутри панели обновления, стираются. На этом этапе, конечно, document.ready() не запускается, поэтому я должен повторно подписаться на эти события внутри endRequest. Введите мою проблему ...

У меня был огромный мозговой пердит, где я в основном брал все, буквально все внутри документа готово и копировал его в endRequest. На самом деле, если я правильно помню, я читал статьи, указанные

Whatever you have in document ready simply copy paste into endRequest

Это хорошо, но вы должны быть осторожны. Я бросал события, которые не были обернуты внутри обновленной панели в endRequest. Результат катастрофический ... по крайней мере для меня.

Эти события будут прикрепляться затем несколько раз .. или на основе числа асинхронных обратных передач. В моем случае, когда я тестировал, я упоминал, что после 6-го или 7-го времени производительность начинает ухудшаться. Ну, к тому времени мои элементы управления были привязаны много раз к событиям. Например, моя кнопка .apply вместе с моим dropdownlist были вне моего updatepanel. Но мой код jQuery добавлял событие изменения моего dropdownlist как в document ready, так и в endRequest.

Результат изначально довольно быстрый, потому что он находится только в document ready. Но поскольку я делаю асинхронные обратные передачи, эти события присоединяются каждый раз. Для n тестов у меня было бы n приложенных событий ... в моем случае тест 7 дает 7 для обработчиков событий изменения!

В данном случае не размещайте никаких обработчиков событий, таких как событие jQuery on() для любых элементов управления, которые НЕ находятся внутри панели обновления. В противном случае вы столкнетесь с тем, с чем я столкнулся, что было плохой работой по мере того, как происходят события.