4

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

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

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

标记和 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;
}

我错过了什么？

4

3 回答 3

7

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

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

于 2012-12-06T15:13:26.107 回答
3

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

$(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
});
于 2012-12-06T15:13:44.983 回答
2

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

在您的情况下，由于box也是动态的，因此您的事件没有绑定到任何东西，您可以改为绑定到存在的文档或当前位于DOM

例如

$(document).on('click','#close',function(){
    alert(1); // Test to see if the click works
});
于 2012-12-06T15:17:17.557 回答