在 href 之前的 click() 函数中执行方法答案

【问题标题】：Performing methods in click() function before href在 href 之前的 click() 函数中执行方法
【发布时间】：2015-12-06 09:19:55
【问题描述】：

我有一个带有href 发送数据的按钮，在此之前我想使用Bootbox.js 显示一个弹出窗口

HTML：

<a href="submit?result=something"> 
  <button class="alert btn btn-primary" type="button">Submit</button>
</a>

JS：

$('alert').click(function(){
    bootbox.alert("Submitted!", function() {
        console.log("Alert Callback");
    });
});

这只是执行href 操作，因此它不会使用Bootbox.js 显示弹出窗口。有没有办法在关闭它后立即执行功能并执行 href？

供参考：http://bootboxjs.com

【问题讨论】：

在 bootbox 回调中显式触发href。
请看stackoverflow.com/questions/7078660/jquery-location-href

标签： javascript jquery html

【解决方案1】：

你可以使用return false;：

$('.alert').click(function(e){ // missed the . for the class selector
    bootbox.alert("Submitted!", function() {
        location.href = this.parentNode.href;
    });
    return false;
});

另一个建议是在按钮本身上使用data-* 属性，而不是将其包装在锚点中：

<button class="alert btn btn-primary" data-href="submit?result=something" type="button">Submit</button>

那么你可以使用这个：

$('.alert').click(function(e){ // missed the . for the class selector
    bootbox.alert("Submitted!", function() {
        location.href = this.dataset['href'];
    });
});

【讨论】：

【解决方案2】：

我认为您可以从 HTML 标记中删除超链接，只需保留按钮，然后执行以下操作：-

$('.alert').click(function(){
    bootbox.alert("Submitted!", function() {
        console.log("Alert Callback");
        window.location.href = '/submit?result=something';
    });
});

【讨论】：