JQM добавить ссылку из функции, не используя событие клика

Question

есть функция, которая создает ссылку, если она отсутствует (ссылка на страницы после извлечения новых данных)

Я вызываю функцию ниже из контроллера, если total_pages> 1

function add_pagination_div() {
    data = '<div id="pagination_sec"><a style="display:block;width:100%;background:#EEEEEE;text-align:center;padding:10px 0;" page-number="1" class="paginate_button" href="#">Show More...</a></div>'
    $(data).appendTo('[data-role=page]').trigger('create');
}

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

$(".paginate_button").click(function(event){
    event.preventDefault();
    var pnumb = $(".paginate_button").attr('page-number');
    var newValue = parseInt(pnumb) + 1;
    $.ajax({
          type: "GET",
          url: "/app/Place/more?page=" + pnumb + "&requested_action=index&listClass=placeList",
          success: function(){
            $(".paginate_button").attr('page-number', newValue);
          }
     });
});

РЕДАКТИРОВАТЬ

---

от контроллера

data = '<div id="pagination_sec"><a style="display:block;width:100%;background:#EEEEEE;text-align:center;padding:10px 0;" data-page-name="index" data-list_name="peopleList" page-number="1" class="paginate_button" href="#">Show More...</a></div>'

WebView.execute_js("add_pagination_div('#{data}');")

Затем изменил скрипт на:

function add_pagination_div(linkData) {
    $(linkData).appendTo('[data-role=page]').trigger('create');
    $(".paginate_button").click(function(event){
        event.preventDefault();
        var pnumb = $(".paginate_button").attr('page-number');
        var newValue = parseInt(pnumb) + 1;
        var pageName = $(".paginate_button").attr('page-name')
        var listName = $(".paginate_button").attr('data-list_name')
        $.ajax({
              type: "GET",
              url: "/app/Place/more?page=" + pnumb + "&requested_action=" + pageName + "&listClass=" + listName,
              success: function(){
                $(".paginate_button").attr('page-number', newValue);
              }
         });
    });
}

Answer 1

Вы можете использовать .live() или еще лучше .delegate(), чтобы привязать обработчик кликов к элементам, которые еще не добавлены в DOM. Поэтому, когда ваша ссылка .paginate_button будет добавлена, обработчик кликов будет работать.

Некоторая документация для тебя:

http://api.jquery.com/delegate/

http://api.jquery.com/live/

Вот jsperf, показывающий, что .delegate() менее ресурсоемкий, чем .live(): http://jsperf.com/jquery-live-vs-jquery-delegate/15

Так $(".paginate_button").click(function(event){ изменится на:

$("[data-role=page]").delegate('.paginate_button', 'click', function(event){

OR

$(".paginate_button").live('click', function(event){

Примечание: было бы лучше использовать идентификатор псевдостраницы в вызове делегата, так как $ ('# page_id') является гораздо более быстрым селектором, чем $ ('[data-role = page]'). При использовании селектора идентификатора используется встроенная функция getElementById (), которая работает быстро, а селектор атрибутов данных ищет все элементы на странице, чтобы определить, есть ли у них атрибут данных.