Question

我正在使用分页和jQuery，我的代码首先看起来像这样：

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

然后我注意到jQuery 1.9中删除了live所以我将代码更改为：

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

但不知怎的，这也没有奏效！问题是我可以从第一个ajax页面导航到第二个页面，然后将第二个页面导回到第一个页面或第三个页面，我的ajax不起作用。我太习惯了，因为我的代码没有注意到新添加的.pagination a。

Answer 1

on仅限于现有元素，如果您想让它在使用on之后听取插入的元素，则必须添加选择器参数。
使用选择器参数，它是委托事件，而没有它是直接事件。
如果您使用on委托事件签名，则回调绑定到on上调用$('thisSelector')的选择器，同时它将侦听选择器中元素的事件像是这样的论点 $('foo').on('event', 'thisSelector', func)。
为了获得更好的性能，您应该将on函数附加到与新插入的元素最接近的静态元素，这实际上是在1.9版本中{j}从jQuery中删除live的主要原因{{1}将监听器附加到具有巨大性能损失的live。

我们从上面了解到，当您致电document时，您必须确保.pagination已经在DOM中，并且不应该替换它。

现在你应该有类似的东西：

on

Answer 2

你可以尝试一下吗？

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

Answer 3

如果你打电话：

~~$（document）.on（“click”，“。apagination a'，function（）{...}）~~

应该是：

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

它将call the event on任何与选择器匹配的动态创建元素。

请参阅above以获得最佳答案。

Answer 4

我希望你的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＆amp;使用最接近的静态容器进行分页以获得性能提升。

jQuery .on无法正常工作

4 个答案: