jquery - e.preventDefault() 仅在第二次起作用

Question

所以，我有这样的问题：第一次，然后<a>点击e.preventDefault()不起作用，我跳到页面顶部，但第二次它起作用了。问题是什么？

$('#more a').live('click', function(e) {
    var last = $('p.post').last().data('id');
    console.log('start');
    if (last != '1') {
        $.ajax({
            type: "POST",
            url: "http://live.iappleworld.ru/ajax_more_mobile.php",
            data: "last=" + last,
            beforeSend: function() {
                $('#more a').text('').prepend('<img src="http://live.iappleworld.ru/ajax-loader.gif" alt="loading"/> Loading...');
            },
            success: function(html) {
                $("#more").remove();
                $(html).hide().appendTo('ul.pageitem').slideDown(600);
            }
        });
    }
    e.preventDefault();
});

在我有另一个脚本之前和之后。

Answer 1

$('#more').on('click','a', function(e) {
  e.preventDefault(); // at the beginning stop page reload

  // your code

});

---

关于.on()

.on()委托事件处理的语法：

$(container).on(eventName, target, handlerFunction)

元素所属的container任何地方，当然容器在页面加载时应该属于 DOM，即它不应该是动态的。Static elementtarget

阅读更多.on()

---

笔记

.live()如果您可以选择使用jQuery >= 1.7和绑定委托事件，请尽量避免使用.on().

---

根据评论

你写过

$('#more').live('click','a',function(e) {...});

但应该是

$('#more').on('click','a',function(e) {...});

---

另一种选择是将a标签更改href为

<a href="javascript:void(0)"></a>

并删除e.preventDefault().

Answer 2

而不是使用 .live 方法，使用delegate. 我不确定您的 html 结构，但我认为这可能有效。

$('#more').delegate('a','click', function(e) {
  var last = $('p.post').last().data('id');
  console.log('start');
  if (last != '1') {
    $.ajax({
        type: "POST",
        url: "http://live.iappleworld.ru/ajax_more_mobile.php",
        data: "last=" + last,
        beforeSend: function() {
            $('#more a').text('').prepend('<img src="http://live.iappleworld.ru/ajax-loader.gif" alt="loading"/> Loading...');
        },
        success: function(html) {
            $("#more").remove();
            $(html).hide().appendTo('ul.pageitem').slideDown(600);
        }
    });
  }
  e.preventDefault();
});

Answer 3

听起来第一次访问页面时没有加载任何 javascript 文件。然后您单击该链接并“正常”地跟随它，这会刷新页面并加载您的 javascript，然后从那时起拦截您的点击事件，正如您所期望的那样。

带有（未）受影响链接的区域是否通过 ajax 加载？