Question

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

我在AJAX上加载按钮这一事实导致了我的问题。我知道我需要事件委托来解决这个问题，但遗憾的是我无法弄清楚如何正确地做到这一点。

我目前的代码是：

        (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

超链接是浏览器对具有a属性的href元素的默认操作。您需要通过调用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>

事件委派的问题

1 个答案: