on()与click事件无关

时间:2012-12-06 15:10:57

标签: jquery

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

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

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

Markup& 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;
}

我错过了什么?

3 个答案:

答案 0 :(得分:7)

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

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

答案 1 :(得分: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
});

答案 2 :(得分:2)

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

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

例如

DOM