Блог

Главная - Вопросы по программированию - Как обновить один и тот же div в Jquery из двух событий из двух разных элементов?

Как обновить один и тот же div в Jquery из двух событий из двух разных элементов?

#jquery #jsp

#jquery #jsp

Вопрос:

Вот сценарий:

   var currentCat = "all";
  $(document).ready(function(){
    $(".categoryItem").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         currentCat = $(this).attr("id");
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:1});                               });    
   $("#browseBookArea").ajaxSuccess(function(){                               
         $(this).show(300);
         $(this).load("Components/browseBookArea.jsp");
    });

   $(".pagination").click(function(event){
         $("#browseBookArea").fadeToggle(100);
         var page = $(this).attr("id");
         alert(currentCat);
         $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
      });
});

Я создаю книжный интернет-магазин. «browseBookArea» — это div, в котором книги будут отображаться в браузере. Класс «.CategoryItem» — это кнопки категорий. Всякий раз, когда нажимается кнопка категории, книги, принадлежащие к этой категории, будут извлекаться с помощью GET rerquest, и в случае успеха он перезагрузит эту область с возвращенными книгами из сервлета. Это то, что делает функция $ («#browseBookArea»).ajaxSuccess.

Теперь я выполняю разбивку на страницы. По сути, разбивка на страницы такая же, как и у category , за исключением того, что на этот раз category уже известна (текущая категория, которую я объявил как глобальную переменную), и страница извлекается с помощью кнопки page при нажатии пользователем (если нажата кнопка category, она считается первой страницей и имеет значение 1).

Проблема в том, что это работает только в первый раз, когда я нажимаю одну из кнопок категории или одну из кнопок страницы. После вызова функции ajax success кнопки страницы больше не будут работать. Я поместил туда предупреждение, просто чтобы убедиться. Это ничего не отобразит.

Все кнопки «.pagination» находятся внутри div «#browseBookArea».

Ответ №1:

Ваша проблема в том, что это:

 $(this).load("Components/browseBookArea.jsp");

заменяет содержимое #browseBookArea и, таким образом, вы теряете привязки кнопок. Вы можете либо использовать обратный вызов для load привязки обработчиков нажатий к новым кнопкам, либо вы можете использовать live для кнопок:

 $(".pagination").live('click', function(event){
    $("#browseBookArea").fadeToggle(100);
    var page = $(this).attr("id");
    alert(currentCat);
    $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
});

или delegate для кнопок:

 $('#browseBookArea').delegate('.pagination', 'click', function(event) {
    $("#browseBookArea").fadeToggle(100);
    var page = $(this).attr("id");
    alert(currentCat);
    $.get("GetBookFromCategoryServlet",{selectedCat:currentCat, currentPage:page});
});

Есть несколько предостережений с delegate и live , просмотрите документацию, чтобы убедиться, что они не будут применяться к вашему конкретному случаю, прежде чем использовать их.

Комментарии:

1. Однако это все еще не решает полностью мою проблему. В примере в документе api «щелкните меня» не обновляется, как у меня. Тем не менее, мне удается придумать другое решение, основанное на предоставленной вами информации. Я не знал, что при повторной загрузке html-страницы мой обработчик событий для этого элемента будет удален. Мое решение заключается в том, что каждый раз, когда страница перезагружается, я помещаю один и тот же скрипт на перезагруженную html-страницу (мой browseBookArea.jsp), поэтому он снова подключит обработчик.

Ответ №2:

Вы удаляете элементы из DOM? Я думаю, что когда вы это делаете, ваши обработчики событий также удаляются.

Вероятно, вы захотите вместо этого использовать delegate, потому что события, связанные с delegate, сохраняются для всех элементов с общим селектором, независимо от того, когда они были добавлены.

В фоновом режиме delegate в основном выполняет JavaScript «addEvent», тогда как click выполняет событие «onclick». События onxxxx привязаны к элементу, тогда как события, добавленные с помощью addEvent, привязаны к селектору (класс, идентификатор и т.д.). Я думаю, это решит вашу проблему.

Примечание:

Вы всегда должны использовать delegate, на всякий случай, если произойдет что-то подобное.