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

Question

我试图在单击 a 标签时返回引导模式的结果，在本例中用作删除按钮。单击删除按钮时，我希望弹出一个模式确认删除，如果用户单击否，则返回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();
        });
    }
}

问题是"click"事件不会等待模态调用的响应，它只是直接进入删除页面。如何使按钮等待来自模态的响应，然后继续到删除页面或根据模态的响应停止？

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;
    })
});