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

Question

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

У меня есть 2 CSS классы, aPage и thePage, Javascript функция, которая создает строку с нумерацией страниц, и JQuery кода для связывания каждой «страницы» в мыши события так, что строка с нумерацией страниц является рассчитывается при нажатии на страницу.

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

Любая помощь очень ценится. Спасибо!

Мой 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; 
    } 

Answer 1

использования жить, чтобы связать событие щелчка

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

Answer 2

Вам нужно либо привязать событие щелчка на пролеты вы repopuplate страницы с или вы можете просто использовать делегат jQuery или функцию live. Что происходит, так это то, что способ привязки события click охватывает только существующие интервалы с классом aPage. Живой или делегат связывается с существующим и будущим:

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

Answer 3

Поскольку вы разрушаете старую .aPage ссылку каждый раз, когда вы звоните .html() вам нужно будет либо использовать .live() или .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)); 
}); 

Answer 4

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

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

изменение

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

в

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

Это будет связываться со всеми присутствующими и БУДУЩИХ элементов с этой Classname.

Answer 5

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

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