Question

我试图在点击标签时返回引导模式的结果，在这种情况下用作删除按钮。点击删除按钮后，我想要弹出模式确认删除，如果用户点击否，则返回false，如果他们点击是，则返回true。

这是我到目前为止所做的：

$('.btn.delete').on('click', function(event) {
    event.stopPropagation(); // There is a listener on the entire row the buttons are on, this prevents the event bubbling up and triggering that listener.
    return modal('Are you sure?', 'Once deleted a user cannot be recovered, are you sure you wish to delete this user?', 'No', 'Yes', function(result) {
        return ! result;
    })
});

var numModals = 0;
function modal(title, content, btn1, btn2, callback) {
    if( ! btn1) {
        btn1 = 'OK';
    }

    var thisModal = numModals++;

    $('body').append('<div id="modal-dialogue-'+thisModal+'" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="modal-dialogue-'+thisModal+'" aria-hidden="true">\
      <div class="modal-dialog modal-sm">\
        <div class="modal-content">\
          <div class="modal-header">\
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
            <h3 id="modal-title">'+title+'</h3>\
          </div>\
          <div class="modal-body">\
            <p>'+content+'</p>\
          </div>\
          <div class="modal-footer">\
            <button class="btn btn-inverse" data-dismiss="modal" id="modal-btn-'+thisModal+'-1">'+btn1+'</button>\
            '+(btn2 !== undefined && btn2.length > 0 ? '<button class="btn btn-danger" data-dismiss="modal" id="modal-btn-'+thisModal+'-2">'+btn2+'</button>' : '')+'\
          </div>\
        </div><!-- /.modal-content -->\
      </div><!-- /.modal-dialog -->\
    </div><!-- /.modal -->');

    $('#modal-dialogue-'+thisModal).modal().on('hidden', function() {
        $(this).data('modal', null).remove();
    });

    if($.isFunction(callback)) {
        $('#modal-btn-'+thisModal+'-1').on('click', function() {
            callback(true);
            $('#modal-dialogue-'+thisModal).modal('hide').data('modal', null).remove();
        });
        $('#modal-btn-'+thisModal+'-2').on('click', function () {
            callback(false)
            $('#modal-dialogue-'+thisModal).modal('hide').data('modal', null).remove();
        });
    }
}

问题是＆＃34;点击＆＃34;事件不等待模态调用的响应，它直接进入删除页面。如何使按钮等待模态的响应然后继续到删除页面或根据模态的响应停止？

Answer 1

您已阻止<a>代码的默认操作。

调用event.preventDefault()应该这样做。

$('.btn.delete').on('click', function(event) {
    event.preventDefault(); // Prevent the default action of the <a> tag - do not go directly into the link.
    event.stopPropagation(); // There is a listener on the entire row the buttons are on, this prevents the event bubbling up and triggering that listener.
    return modal('Are you sure?', 'Once deleted a user cannot be recovered, are you sure you wish to delete this user?', 'No', 'Yes', function(result) {
        return ! result;
    })
});

然后，要使按钮工作，只需将链接保存到变量中，并在确认时设置window.location。

$('.btn.delete').on('click', function(event) {
    event.preventDefault(); // Prevent the default action of the <a> tag - do not go directly into the link.
    event.stopPropagation(); // There is a listener on the entire row the buttons are on, this prevents the event bubbling up and triggering that listener.

    var link = $(this).attr("href");

    return modal('Are you sure?', 'Once deleted a user cannot be recovered, are you sure you wish to delete this user?', 'No', 'Yes', function(result) {
        if(result)
            window.location = link;
        return ! result;
    })
});

在href点击时返回另一个函数的响应

1 个答案: