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"/>

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

3 个答案: