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到submit有关 - 有谁知道如何解决这个问题？ “取消”应该只关闭浏览器模式。

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

Answer 1

将按钮HTML更改为如下（使用return confirmDeleteRecord（）;）：

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

编辑：

更好的方法是以一种不引人注目的方式将单击事件处理程序附加到删除按钮。你可以试试这个：

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

Answer 2

您必须将提交处理程序绑定到某个位置。这是你的问题：

$.bind("submit", function() {

您需要选择正在提交的表单并将提交处理程序绑定到表单。因此，例如，如果您的表单具有标识myForm，则应该这样说：

$('#myForm').bind("submit", function() {

甚至更好，使用快捷方式调用：

$('#myForm').submit(function() {

对于您的按钮，请移除onclick="confirmDeleteRecord();，然后将其命名为class或id：

<button id="btnDelete">
    <span>Delete</span>
</button>

最后，为jQuery添加一个单击处理程序赋值：

$('#btnDelete').click(confirmDeleteRecord);

为了整洁，您还可以简化您的确认功能，如下所示：

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

Answer 3

您的绑定将绑定到每个提交。您需要为每个提交提供ID或类选择器。例如：

$('#classname').submit(function() { // your code here }

请参阅：http://api.jquery.com/submit/

jQuery绑定提交导致问题

3 个答案: