привязка к событию клика — событие срабатывает только один раз

Я использую jquery для разбиения на страницы HTML-таблицы.

У меня есть 2 класса CSS, aPage и thePage, функция javascript, которая создает строку разбивки на страницы, и код jquery для привязки каждой "страницы" к щелчку. em>, чтобы строка нумерации страниц вычислялась при нажатии на страницу.

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

Мы очень признательны за любую помощь. Спасибо!!

Мой код javascript/jquery:

var thisPage=1; npages=10;
 //initial pagination
  $("#pag").html(showPag(thisPage,npages));

 //  bind pagination string to click event
     $(".aPage").click(function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });
 // function that returns pagination string
     function showPag(thisPage,npages) {
     p="";
     for(i=1;i<=10;i++){
     if(i==thisPage) {
     p+="<span class='thePage'>"+i+"</span>"
      }
     else {p+="<span class='aPage'>"+i+"</span>" }
     }
     return p;
   }

javascript pagination jquery jquery-click-event
person Tac    schedule 27.04.2011    source источник

Ответы (5)


arrow_upward
9
arrow_downward

используйте live для привязки события клика

 $(".aPage").live('click',function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });
person Naren Sisodiya    schedule 27.04.2011
comment
Такие быстрые ответы! Это работает. Должен был подумать. Спасибо!! - person Tac; 27.04.2011

arrow_upward
3
arrow_downward

Поскольку вы уничтожаете старую ссылку .aPage каждый раз, когда вызываете .html(), вам нужно будет либо использовать .live(), либо < a href="http://api.jquery.com/delegate/" rel="nofollow">.delegate()

Используя .live()

$(".aPage").live("click", function(event){
   var thisPage=$(this).text()
   $("#pag").html(showPag(thisPage,npages));
});

Используя .delegate()

$("#pag").delegate(".aPage", "click", function(event){
   var thisPage=$(this).text()
   $("#pag").html(showPag(thisPage,npages));
});
person Mark Coleman    schedule 27.04.2011
comment
Спасибо!! Узнал что-то новое о событиях. - person Tac; 27.04.2011

arrow_upward
1
arrow_downward

Вам нужно либо повторно привязать событие клика к промежуткам, с которыми вы повторно заполняете страницу, либо вы можете просто использовать либо делегат jQuery, либо живую функцию. Происходит то, что способ, которым вы привязываете событие щелчка, покрывает только существующие промежутки с классом aPage. Live или делегировать будут привязаны к существующим и будущим:

$(".aPage").live("click", function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });
person scrappedcola    schedule 27.04.2011

arrow_upward
1
arrow_downward

Что ж, ваше событие клика зарегистрировано для элементов класса .aPage, а не для элемента #pag. Если этот элемент с классом .aPage оказывается внутри вашего элемента #pag (вы не указали, так что я просто угадываю здесь), он уничтожается при замене html страницы. Чтобы исправить это, привяжите обработчик кликов к #pag.

Вы также можете попробовать следующее:

изменять

$(".aPage").click(function(){...})

to

$(".aPage").live('click',function(){...})

Это будет связано со всеми настоящими и будущими элементами с этим className.

person ampersand    schedule 27.04.2011
comment
Спасибо!! Также не нужно делать ‹i›event‹/i› параметром. - person Tac; 27.04.2011
comment
короткий ответ: если вы не используете переменную event, то вам не нужно указывать ее в определении функции. (тем не менее он передается функции... и вы могли получить к нему доступ, но это для другого поста...) - person ampersand; 27.04.2011

arrow_upward
0
arrow_downward

Начиная с jQuery 1.7, live больше не поддерживается, а рекомендуется делегировать.

$("#pag").delegate(".aPage", "click", function(event){
    var thisPage=$(this).text()
    $("#pag").html(showPag(thisPage,npages));  
});
person ray6080    schedule 23.12.2013