Question

我在动态创建的div中有一个id为“close”的div，其id为“box”。以下代码用于在用户单击关闭时执行某些操作。

$('#box').on('click','#close',function(){
    alert(1); // Test to see if the click works
});

我正在使用Big Cartel CMS，如果我在“实时预览模式”中单击关闭，它似乎工作正常，但每当我实际发布网站并正常查看时，它绝对没有 - 没有错误 - 滩。

Markup＆amp; CSS，以防万一：

<div id="box"> <!-- Dynamically loaded -->
    <div id="close"></div>
    <h2 id="name"></h2>
    <div id="description">
        <p>blah...</p>
    </div>
</div>

#close{
    background: url(image-path);
    float: right;
    position: relative;
    top: 0;
    margin: 0 0 0 12px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 100;
}

我错过了什么？

Answer 1

问题是因为#box也是动态的。您需要将主选择器作为加载页面时可用的元素。

主要候选人将是您要加载#box的元素。

Answer 2

您需要挂钩现有元素，而不是动态创建的元素：

$(document).on('click','#box #close',function(){
    alert(1); // Test to see if the click works
});

编辑：更好的解决方案，不挂钩文件:)避免dom遍历。

$("#boxesparentid").on('click','#close',function(){
    alert(1); // Test to see if the click works
});

Answer 3

当您使用事件委派时（例如，使用.on的方式），您将事件绑定到DOM中更高的元素，然后检查每个冒泡的事件，看它是否与选择器匹配。要实现的重要部分是，您需要确保您绑定的元素当前存在于DOM中（不需要冒泡的元素）。

在你的情况下，由于 box 也是动态的，你的事件不会绑定到任何东西，你可以改为绑定到存在的文档或当前在{{1}中的任何更高级别元素}

例如

DOM

on（）与click事件无关

3 个答案: