Question

我有一个我已创建的模态并附加了一个按钮，可在单击时将其删除。 Twitter bootstrap的模态具有仅在单击关闭按钮或背景（模态后面的灰色图层）时关闭模态的功能。

这不会起作用吗？

jQuery的：

   $('#overlay:not(#modal)').on('click', function(e) {
       $('#overlay').remove();
    e.stopPropagation();
  });

这是我的模态HTML代码：

<script id="Belief" type="text/html">
    <div id="overlay">
        <div id="container" class="container">
            <div class="row">
                <div class="twelve columns">
                    <div class="modal-container">
                        <div id="modal" class="modal-animation">
                            <p>This is the {{avonValues}} template, We are actually passing data in once place the year: {{year}}! <br>


                                <a id="appButton" class="button button-primary modal-button">lets get started!</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

Answer 1

不，这不会起作用，因为：在这种情况下，not（#modal）不会影响事件可以触发的元素，因为#mod不在#overview生成的元素集合中。 / p>

jQuery选择器是一回事：选择元素。除了最初选择的元素之外，它们不会影响其后链接的任何方法。

根据你的需要，你必须测试事件目标，看它是#modal还是#modal的孩子。

$('#overlay').on('click', function(e) {
  // don't target #modal or any elements within #modal
  if ($(e.target).closest('#modal').length === 0) {
    $('#overlay').remove();
    e.stopPropagation();
  }
});

以这种方式看待：您在问题中创建的链条一步一步地运作：

$("#overview:not(#modal)")

以上选择ID为overview的元素，且ID不为modal。

.on('click', doSomething);

上面的代码将click事件绑定到链中前一个链接的选定元素。

现在，如果您将第一个更改为$("#overview")，则会产生相同的结果，因为我们所做的只是删除“并且没有modal的ID。”，它没有任何效果，因为ID为overview的元素的ID不能为modal，此时您应该能够看到为什么添加:not(#modal)没有使事件忽略来自#modal内部的点击。

jQuery：不是选择器没有按预期工作

1 个答案: