Question

我现在有一堆乱七八糟的东西，并且在一堆不同的文件中有太多的东西（继承），而我最后一块也遇到了麻烦。

我有一个包含表单的模态，除了选择框之外，一切正常。一旦用户单击选择框，它将触发关闭功能。我已经尝试了所有我能记住的东西，但是我不记得我正在尝试做的事情的正确条款，所以我不能谷歌。

代码：

<div class="modal">
<select>
    <option>Select an option</option>
    <option>1</option>
    <option>2</option>
</select>
</div>

和js：

$(document).click(function(){
    if(!$(event.target).is(".modal")){
        $(".modal").hide();
    };
});

除了选择框之外，这适用于我放在那里的任何东西。

更新：好的，所以我对这个问题完全错了，并在我的测试中做了一些不正确的假设。这与selectboxes无关，但特别是jQuery datepicker-ui选择。所以这个问题与Stackoverflow上的其他几个问题重复，它可以作为重复关闭。我发现的一个重复问题是：Implementing jQuery DatePicker in Bootstrap modal

Answer 1

event.target是指事件源自的元素，因此当您点击select元素e.target时，select元素就是$(event.target).is(".modal")元素}测试将失败。

所以解决方案是检查事件的目标是否在.modal元素内，您可以使用.closest()，如下所示

$(document).click(function(){
    if(!$(event.target).closest(".modal").length){
        $(".modal").hide();
    };
});

演示：Fiddle

使用jQuery阻止模态内的元素关闭模态？

1 个答案: