Question

这是我想要做的：我有这个处理点击链接的处理程序：

$('body').on('click', 'a.ajax.get', function(e){
    e.preventDefault();
    $.get($(this).attr('href'), function(){alert('Success!');});
});

后来我创建了这个处理程序，所以我可以在行动发生前请求用户确认：

$('body').on('click', 'a[data-confirmation]', function(){
   return confirm($(this).data('confirmation'));
});

此处理程序位于我的脚本

的顶部

导致我出现问题的标记是这样的：

<a href="do/something/there" class="ajax get" data-confirmation="Are you sure you want to do that?">
    Click me!
</a>

我认为它会做的是当用户点击确认框中的“取消”时，回调将返回false并且事件链将停止。这不会发生，无论用户在确认框中选择什么，链接都会被“点击”。

我做错了什么，或者这是不可能的？

Answer 1

试试这个

$('body').on('click', 'a[data-confirmation]', function(e) {
    var check = confirm($(this).data('confirmation'))
    if (!check) {
        e.preventDefault();
    }
    else {
        $.get($(this).attr('href'), function() {
            alert('Success!');
        });
    }
});

检查FIDDLE

点击取消按钮时未发送任何请求

UPDATED FIDDLE

Answer 2

最好将所有内容压缩到一个函数中，只需检查当前单击的元素是否具有data-confirmation属性，如果是，则显示确认（并处理它！）

$(document).ready(function() {

  $('body').on('click', 'a.ajax.get', function(e) {     
    if($(this).data('confirmation') !== undefined) { 
      if(!confirm($(this).data('confirmation'))) {
        e.preventDefault(); return false;
      }
    }

    $.get($(this).attr('href'), function(){
      alert('Success!');
    }); 
  });

});

Here's a fiddle

是否可以停止从元素开始的所有事件？

2 个答案: