Question

我有以下HTML代码：

<div>
  <span>Products per page:</span>
  <a class="selectview" href="/womens-clothing/shorts?page=1&view=20">20</a>
  <a class="selectview" href="/womens-clothing/shorts?page=1&view=200">200</a>
<div>

，jQuery如下：

jQuery('.selectview').click(function (ev) {

  ev.preventDefault();

  var alink = jQuery(this).attr('href'); 

  var view = getLinkVars(alink)["view"]; 
  var page = jQuery("#currentpageno").val();

  alert(alink);
  alert(view);
  alert(page);

  run_ajax(view,page);


});

如果我点击任何链接，代码第一次运行正常;我看到警报和ajax代码运行正常，但是当我第二次点击它时，整个页面都刷新，没有显示警报。然后，如果我再次点击它可以工作，那么当我再次点击它时它会工作，依此类推。

我可能做错了什么？

Answer 1

我的猜测是run_ajax正在用新的链接替换链接。 .click仅绑定到当时与选择器匹配的元素。新添加的链接不会绑定点击事件。

您需要将活动设为“直播”。使用.on绑定它们，如下所示：

jQuery(document).on('click', '.selectview', function (ev) {
    ev.preventDefault();
    // code...
});

这将“委托”该活动。它将在所有.selectview链接中运行，无论它们何时添加到DOM。

Answer 2

如果run_ajax正在替换链接，您可以包装附加点击处理程序的代码，然后在run_ajax内部，您可以在用新内容替换链接后调用包装器：

var setupClickHandlers = function(container) {
    jQuery(container).find('.selectview').click(function (ev) {

        ev.preventDefault();

        var alink = jQuery(this).attr('href'); 

        var view = getLinkVars(alink)["view"]; 
        var page = jQuery("#currentpageno").val();

        alert(alink);
        alert(view);
        alert(page);

        run_ajax(view,page);
    });
};
setupClickHandlers(container);

在run_ajax中：

var run_ajax = function(view, page) {
    // do your stuff here

    // set up click handlers on the new content
    setupClickHandlers(container);
}

PreventDefault无法在第二次点击时工作

2 个答案: