7

如果我有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射击，但事实并非如此。当我单击 a 标签时，它只是转到 url，而不执行 javascript。我怎样才能使这项工作？

谢谢。

4

5 回答 5

15

此代码有效：

您不能只是做return true并期望链接在您完成后触发e.preventDefault()。我不得不bootbox.confirm()用 JS 确认替换你的，但它仍然可以工作。

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

演示

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

于 2012-07-08T00:44:14.537 回答
6

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

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

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

通常，当您需要确认时，这是完成它的最佳方式，并且在提交表单之前进行确认更有用。

当您要求确认时，我不确定 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 方法，因为它可能导致附加到此元素的任何其他事件失败。

于 2012-07-08T01:27:48.453 回答
2

我也遇到了这个问题。

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

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

$("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');
            }
        });
    }
});

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

于 2013-09-14T18:35:46.743 回答
0

你需要return false;锚标签。

看到这个 jsFiddle。

于 2012-07-08T00:36:04.720 回答
0

试试这个代码：

$(".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;
    }
于 2015-11-21T07:57:49.997 回答