Question

如果我有a标记：

<a id="delete-event" href="/delete/1234">Delete</a>

一些提示确认删除的javascript：

 $("#delete-event").click(function(e) {
    e.preventDefault();

    bootbox.confirm("Are you sure you wish to delete this?", function(confirmed) {
        if(confirmed) {
            return true;
        }
    }); 
});

我认为做e.preventDefault()会阻止a href被解雇，但事实并非如此。当我点击一个标签时，它只是转到网址，而不执行javascript。我怎样才能做到这一点？

感谢。

Answer 1

此代码有效：

您不能只执行return true并希望在完成e.preventDefault()后触发链接。我不得不用JS确认替换你的bootbox.confirm()，但它仍然有效。

$("#delete-event").click(function(e) {
    e.preventDefault();
    var a = confirm("yes?");
    if(a) window.location = $('#delete-event').attr('href');
});

DEMO

尝试使用我上面提供的代码块替换您的代码块。如果可行，请重新输入bootbox确认，然后重试。那会告诉你错误在哪里。

Answer 2

最好只在需要时才阻止它。例如，如果用户从确认框中选择“取消”，则阻止默认值。

$("#delete-event").click(function(e) {
    if (!confirm('Are you sure you wish to delete this?')) {
        e.preventDefault();
    } 
});

演示：http://jsfiddle.net/SCCDX/

通常情况下，当您需要确认时，这是完成此操作的最佳方式，并且在提交表单之前，此事件对确认更有用。

我不确定当您要求确认时，bootbox是否会复制浏览器的行为。所以它可能在这种情况下不起作用。如果是这种情况，更好的方法是在某处设置标志。

$("#delete-event").click(function(e) {
    if (!$(this).data('confirmed')) {
       e.preventDefault()
    } else {
       bootbox.confirm("Are you sure you wish to delete this?", function(confirmed) {
          if(confirmed) {
              $(this).data('confirmed', 1).click();           
          }
       });        
    }
});

// Disclaimer: This code is untested. clicking on the link may cause data loss. lol

不知何故，我不喜欢window.location方法，因为它可能导致附加到此元素的任何其他事件失败。

Answer 3

我也遇到了这个问题。

您可以使用window.location使浏览器访问新页面，但当前页面不会记录在浏览器历史记录中（至少使用谷歌浏览器）。

所以我同意SMathew应该触发新事件。但由于某些安全原因，jQuery触发的锚点上的click事件不会使浏览器访问新页面。最后我发现以下代码有效。

$("a.confirm").on('click', function(e) {
    if (!$(this).data('confirmed')) {
        e.preventDefault();
        var a = this;
        bootbox.confirm("Are you sure?", "No", "Yes", function(result) {
            if(result) {
                $(a).data('confirmed', 1);
                if (document.createEvent) {
                    var evObj = document.createEvent('MouseEvents');
                    evObj.initEvent('click', true, true);
                    a.dispatchEvent(evObj);
                }
                else if (document.createEventObject) {
                    a.fireEvent('onclick');
                }
            }
        });
    }
});

我只是在谷歌浏览器上测试上面的代码，我从https://getsatisfaction.com/issuu/topics/opening_the_issuu_smartlook_viewer_with_my_flash_website?utm_content=topic_link&utm_medium=email&utm_source=reply_notification

找到了火灾事件代码

更多

我发现此帖子https://stackoverflow.com/a/18132076/1194307，jQuery.simulate可用于解决此问题。我的最终代码如下：

$("[data-toggle=confirm]").on('click', function(e) {
    var a = $(this);
    if (!a.data('confirmed')) {
        e.preventDefault();

        var question = a.data('question');
        if (!question) question = 'Are you sure?';

        var yes = a.data('yes');
        if (!yes) yes = 'Yes';

        var no = a.data('no');
        if (!no) no = 'No';

        bootbox.confirm(question, no, yes, function(result) {
            if(result) {
                a.data('confirmed', 1).simulate('click');
            }
        });
    }
});

它适用于锚点和表单按钮。

Answer 4

您需要return false;来获取锚标记。

请参阅this jsFiddle。

Answer 5

试试这段代码：

$(".SelectedPassengers").each(function () {
            debugger;

        if ($(this).text() == "") {
            debugger;
            var id = this.id.split('-');
            alert("Please Select Passenger " + id[1]);
            var h = "" + this.id;
          // $(this).preventDefault();
           //$('#' + h).focus();
           //this.preventDefault();
           stopEvent = "enter";
        }

    });
    if (stopEvent != "") {
        stopEvent = "";
        event.preventDefault();
        return false;
    }

jQuery单击Event PreventDefault

5 个答案: