针对嵌套元素的触发单击事件

Question

我目前正在尝试使用模态窗口弹出窗口。基本上它进来并占据了整个窗口。

<div id="popup">
    <div id="modal">
        <div id="closeBox"><span id="x">X</span></div>
        <form>
            form stuff..
        </form>
    </div>
</div>

现在，当我将#closeBox定位为..

时

$("#closeBox").click(function() {
    $("#popup").remove();   
});

事件永远不会发生。我相信这是因为它是嵌套的，如果我将#closeBox切换为html，则事件会触发并且可以正常工作，就像我将其切换到#popup一样。如何定位嵌套元素，以便仅在单击#closeBox时触发？

Answer 1

使用＆＃34;委托＆＃34;将处理程序附加到DOM元素

$( "body" ).delegate( "#closeBox", "click", function() {
  $("#popup").remove();  
});