javascript - jQuery 绑定(bind)提交导致问题

Question

我使用 jQuery Fancybox 显示一个表单 - 在该表单中，用户可以选择编辑记录或删除记录。

该弹窗的 JS 配置如下:

$('tr.record').click(function() {
    var record_id = $(this).attr("id");
    var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
    $.fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'ajax',
        'href': link,
        'onClosed': function() {
            parent.location.reload(true);
        }
    });
    $.bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            data: $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });
        return false;
    });
});

当用户更改数据并单击“保存”时，这将非常有效，如下所示:

<form>
    <button>
        <span>
            Save
        </span>
    </button>
</form>

接下来我为删除按钮打开了一个新表单

<form>
    <button onclick="confirmDeleteRecord();">
        <span>
            Delete
        </span>
    </button>
</form>

哪个 onClick 运行这个:

function confirmDeleteRecord() {
    var agree = confirm("This expense will be removed and you can't undo this action. Are you sure you want to remove this record?");
    if (agree) return true;
    else return false;
}

我遇到的问题是，当我在浏览器模式确认中单击“取消”时，表单仍然会提交并且记录会被删除。

我怀疑这与绑定(bind)到提交有关——有人知道如何解决这个问题吗？ “取消”应该只是关闭浏览器模式。

感谢您的帮助，非常感谢。

Answer 1

将按钮 HTML 更改为如下(使用 return recognizeDeleteRecord();):

<button onclick="return confirmDeleteRecord();">         
   <span>             Delete         </span>     
</button> 

编辑:

更好的方法是以不显眼的方式将单击事件处理程序附加到删除按钮。您可以尝试以下替代方案:

<button id="deleteBtn">         
   <span>             Delete         </span>     
</button> 
<script type="text/javascript">
 $(function(){
    $("#deleteBtn").click(confirmDeleteRecord);
 });
</script>