JavaScript中的ok取消按钮上的事件

Question

我遇到了一个小问题。

<input class="btn btn-home" type="submit" name="discard" id="discard" onclick="return confirm('Are you sure you want to discard changes?')" alt="Discard" value="Discard Changes"/>

$('document').ready(function(){
    var subm = "";
    $('input[type="submit"]').click(function(e) {
        subm = e.target.id;
        if(subm == 'discard')
            window.location = "http://www.weblink.com/manager.php";
    })
});

当用户点击按钮时，会出现一个确认框，其中确定取消。当用户点击确定它将重定向到其他页面，如果用户点击取消，它将保留在此页面上。

问题是，如果用户点击取消，它会重定向。如果点击取消按钮，我不想重定向页面。

Answer 1

这里有两个问题：

• 你正在尝试将内联和外部JS结合起来，这总是有点混乱
• 你没有压制提交按钮的原生行为，即提交一个表单（我假设你已经在你的HTML中，即使它没有显示）。实际上，您甚至不需要提交类型的按钮。

HTML：

<button class="btn btn-home" name="discard" id="discard">Discard Changes</button>

JS：

$('#discard').on('click', function(evt) {
    evt.preventDefault(); //don't submit the form, which a button naturally does
    if (confirm('Are you sure you want to discard changes?'))
        location.href = 'http://www.weblink.com/manager.php'; //redirect only on confirm
});

Answer 2

将确认对话框放在onsubmit侦听器中。无需使用点击监听器。

<form onsubmit="return confirm('whatever your confirmation message')">

    <input class="btn btn-home" type="submit" name="discard" value="Discard Changes"/>
</form>

Answer 3

您需要删除内联脚本，

并且对代码的修改应该类似于以下内容 -

$('document').ready(function()
{
  var subm = "";
 $('input[type="submit"]').click(function(e) {
   var isConfirmed = confirm('Are you sure you want to discard changes?');
   if(isConfirmed){
     subm = e.target.id;
     if(subm == 'discard'){
       window.location = "http://www.weblink.com/manager.php";
    }
   }
 });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <input class="btn btn-home" type="submit" name="discard" id="discard"   alt="Discard" value="Discard Changes"/>