javascript - 事件委托(delegate)问题

Question

我正在尝试使用这个 jQuery 插件: http://ethaizone.github.io/Bootstrap-Confirmation/#

我通过 AJAX 加载按钮这一事实导致了我的问题。我知道我需要事件委托(delegate)来解决这个问题，但遗憾的是我不知道如何正确地做到这一点。

我当前的代码是:

        (function($) {

        $(document).on( "click", "a[data-toggle='confirmation']", function( event ) {
            $(this).confirmation()
        });

    }(jQuery));

还有 HTML 按钮:

<a href='test' class='btn btn-primary' data-toggle='confirmation'>Click me</a>

遗憾的是有一些问题。如果我单击该按钮，它会将我重定向到给定的 href 属性，而不会先显示对话框。如果我删除了 href，那么我需要单击该按钮 2 次才能打开对话框(之后单击同一个按钮就足以再次打开它)。

我做错了什么？

Answer 1

超链接之后是浏览器对具有 href 属性的 a 元素的默认操作。您需要通过调用 preventDefault 告诉浏览器不要这样做:

$(document).on( "click", "a[data-toggle='confirmation']", function( event ) {
    event.preventDefault();
    $(this).confirmation()
});

看起来该库希望您提供一个 data-href 属性，如果用户接受确认，它是要浏览到的 URI:

<a href='test' class='btn btn-primary' data-toggle='confirmation' data-href="/accept-url">Click me</a>