Javascript jQuery:非选择器未按预期工作

我创建了一个模式，并附加了一个按钮，在单击时将其删除。TwitterBootstrap的模式功能只有在单击关闭按钮或背景（模式后面的灰显层）时才关闭模式

这不管用吗

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>

这是{{avonValues}}模板，我们实际上在一个地方传递数据：{{year}

让我们开始吧！

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

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

为了满足您的需要，您必须测试事件目标，看看它是“模态”还是“模态”的子对象

---

这样看：您在问题中创建的链一步一步地工作：

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

上面选择的元素ID为

概述

，而ID为

模态

.on('click', doSomething);

上面的代码将单击事件绑定到链中上一个链接中的选定元素

---

现在，如果您将第一个更改为

$（“#概述”）

，它将产生相同的结果，因为我们所做的只是删除“并且没有

模态的id

”，这没有效果，因为id为

概述的元素不能有
模态的id，此时，您应该能够看到为什么添加
：not（#model）
不会使事件忽略源自内部#model的单击。
选择器说。。。。不是另一个ID的目标特定ID。。。。没有意义，
$（“#覆盖：不（#模态）”
根本不影响它后面的内容，也不影响选择的其他元素。：not不会向事件指示它应该忽略从#model开始的事件。这不是它的工作原理。您无法对该选择器执行任何操作以使其按您希望的方式工作。
$（“#overlay:not（#modal）”
表示选择ID为overlay但ID为modal的元素。这是没有道理的。@Kevin谢谢你的帮助！很高兴我能帮忙。：）最后感谢您的帮助，但您的解决方案会阻止按钮上的事件。我想这无法实现，因为按钮嵌套在
#modal
div中。这是正确的。您必须进一步过滤它（if条件）以允许按钮，但继续阻止其他所有内容。但是我不知道你在用这个按钮做什么，所以我把它留给你。是的，我不认为像这样的事件：
div#1>div#2>div#3>按钮
只有div#1，或者按钮删除整个
模态
体验，因为它们是嵌套的。
.on('click', doSomething);