Return 另一个函数对 href 点击的响应

Question

我正在尝试 return 单击 a 标签时 bootstrap 模式的结果，在本例中用作删除按钮。单击删除按钮时，我希望弹出一个模式来确认删除，如果用户单击否，return false，如果他们单击是，则 return 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;
    })
});

然后，要使按钮起作用，只需将 link 保存到一个变量中，并在确认时设置 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;
    })
});

Return 另一个函数对 href 点击的响应

Return response of another function on a href click

javascript

jquery

modal-dialog

twitter-bootstrap-3