-1

I'm playing around with pagination and jQuery, my code first looked like this:

$(function() {
    $(".pagination a").live("click", function() {
        $.get(this.href, null, null, "script");
        return false;
    });
});

Then I noticed that live was removed in jQuery 1.9 so I changed my code to:

$(function() {
    $(".pagination").on("click", 'a', function() {
        $.get(this.href, null, null, "script");
        return false;
    });
});

But somehow this also won't work! The problem is that I can navigate from the first ajax page to the second but then form the second back to the first page or to the third page my ajax is not working. I supose because my code does not regognice the new added .pagination a.

4

4 回答 4

5
  • on只对现有元素绑定，如果你想让它监听在你使用后插入的元素，on你必须添加一个选择器参数。
    使用选择器参数它是一个委托事件，而没有它是一个直接事件。
  • 如果您使用on委托事件签名，则回调绑定到on被调用的选择器$('thisSelector')，同时它将侦听选择器参数中元素的事件，例如
    $('foo').on('event', 'thisSelector', func).
  • 为了获得更好的性能，您应该将函数附加到最接近新插入元素的静态元素，这实际上是在 1.9 版中从 jQuery 中删除on的主要原因，将侦听器附加到具有巨大性能损失的对象上。livelivedocument

我们从上面了解到，你必须确保.pagination在调用时已经在 DOM 中on，并且它不应该被替换。

现在你应该带上类似的东西：

$("{staticElement-closeToTheNewElements}").on("click", '.pagination a',callback);
于 2013-09-17T17:58:24.090 回答
1

Could you try this?

$(function () {
    $(document).on("click", ".pagination a", function () {
        $.get(this.href, null, null, "script");
        return false;
    });
});
于 2013-09-17T17:49:49.843 回答
1

如果你打电话：

$(document).on("click", '.pagination a', function(){...})

应该：

$('#container-element').on("click", '.pagination a', function(){...})

它将在与选择器匹配的任何动态创建的元素 上调用事件。

最佳答案见上文。

于 2013-09-17T17:51:49.590 回答
0

我希望您的 html 与此类似：如果您的带有类分页的 div 是通过 ajax 加载的，那么将其用于事件委托将无济于事，因为它不是静态的。

 <body>
    <div id="static_div">
      <div class="pagination">
        <a href="" id="alink">I'm a link</a>
      </div>
    </div>
 </body>

利用

$('#static_div').on('click', '.pagination a', function(){...});

我建议不要使用body或document使用最接近的静态容器来进行分页以获得性能提升。

于 2013-09-17T17:56:10.743 回答