Событие клика не работает после пейджинга ajax

Question

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

Вот как у меня это настроено:

JQuery скрипт

<script type="text/javascript">
// prepare when the DOM is ready 
$().ready(function() {
//popup div
$(".wsbutton_pop").click(function(e){ 
//getting height and width of the message box

      var height = $('#popuup_div').height();
      var width = $('#popuup_div').width();
      //calculating offset for displaying popup message
      leftVal=e.pageX-(width/2)+"px";
      topVal=e.pageY-(height/2)+"px";
      //show the popup message and hide with fading effect
      $('#popuup_div').css({left:leftVal,top:topVal}).show();
      $('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>");

       $.ajax({ 
          type: "get", 
          url: $(this).attr("href"), 
          success: function(r){ 
           $('#popuup_div').html("")   
           $('#popuup_div').prepend(r);
             }
     });

  });

//close div on mouse click

$(".popup_msg").click(function(e){ 
      $('#popuup_div').fadeOut();
  }); 

}); 
</script>

Должно появиться окно с содержимым с другой страницы.

Теперь моя ссылка: <a href="http://mysite.com/file.php?content=1" class="wsbutton_pop">Load content</a>

Это прекрасно работает на начальной странице, но проблема в том, что когда я нажимаю, чтобы перейти на страницу 2, на которой есть та же самая ссылка, ссылка больше не работает.

Как примечание, мои страницы должны загружаться в div с id = "paging". Сам по себе ajax-пейджинг прекрасно работает, просто любое событие jquery click на получающихся страницах не работает. Я думаю, что проблема может заключаться в том, что мне нужно заново связать сценарий, но я не знаю, как это сделать.

Спасибо за любую помощь в этом.

Answer 1

Полагаю, вы перезаписываете ссылку пагинацией, чтобы событие click больше не связывалось. Если вы используете jquery 1.3, вы можете использовать live events , чтобы исправить это.

$(".wsbutton_pop").live("click", function(e) { ...

Или, если вы используете более раннюю версию jQuery, вы можете просто заново подключить обработчик событий, когда получите новые данные страницы обратно.

Answer 2

Вы правы по поводу повторного связывания скрипта. Причина в том, что элементы на странице воссоздаются во время обратной передачи ajax.

Если вы используете jQuery 1.3 или выше, вы можете использовать живые события (для клика), например:

$(".wsbutton_pop").live("click", function(e){ 
    ...
});

Обратите внимание, что живые события не работают со следующими событиями: изменение, размытие, фокус, выделение мыши, отпускание мыши и отправка.

Если вы не используете jQuery 1.3 или вам нужно использовать одно из событий выше, следуйте советам в следующей статье, чтобы избежать утечек памяти: Код-проект статьи

Answer 3

Вы связываете только начальные элементы .wsbutton_pop. Если они удаляются и добавляются новые элементы класса .wsbutton_pop, они не получат автоматически обработчик события click, который вы подключили один раз.

То, что вы ищете, это

$(".wsbutton_pop").live("click", function(e) {...});

Это будет применяться ко всем экземплярам .wsbutton_pop, которые в данный момент находятся на странице, и ко всем, которые создаются.

- = - = - = - = - = - = - = - = - = -

Другие ответы пришли, когда я написал это, я бы сказал, что если мы получим коллаж из постов Брайана Фишера и Джимми Р. Хаутса, у нас будет лучший ответ, и, вероятно, упомянем, что только элементы, которые в данный момент DOM получает обработчик событий при использовании $ (..). Click (...)

Answer 4

Судя по вашему описанию, вы создаете новую страницу с .wsbutton_pop. Если это так, вам нужно прикрепить к нему функцию onclick. Ваш первоначальный скрипт запускается только при первой загрузке, поэтому регистрация только для тех .wsbutton_pop, которые существуют в то время.