javascript - 阻止打开后 Bootstrap 模式不显示

Question

我正在使用 Bootstrap 3 创建模态表单。在用户点击按钮打开模式之前，有一个字段验证。

如果有效则显示模态，否则阻止显示模态。

问题出现在第二次，用户点击按钮，模态框不会显示。如何解决这个问题？

显示模态和防止显示模态的代码:jsfiddle

$("#btnLookupClient").click(function (e) {
    if ($("select[name='OfficeID'] option:selected").index() <= 0) {
        alert("Please select office");
        $("#OfficeID").focus();
        $("#clientModal").on("show.bs.modal", function (e) {
            return e.preventDefault() // stops modal from being shown
        });
    } else {
        var url = '@Url.Content("~/Client/Search?officeID=")' + $("#OfficeID").val();
        $.get(url)
            .done(function (data) {
                $("#lookup-client-container").html(data);
                $("#clientModal").modal(show = true, backdrop = true);
            });
    }
});

Answer 1

使用 one() 而不是 on()。

$("#clientModal").one("show.bs.modal", function (e) {
            return e.preventDefault() // stops modal from being shown
        });

请看这里:http://jsfiddle.net/akcbj4n5/1/
另请引用:Difference between jQuery.one() and jQuery.on()