如何将侦听器添加到页面加载后创建的div?

时间:2015-07-10 08:37:24

标签: javascript jquery html angularjs

我在这里查找了其他类似的问题,看起来使用on()的事件委派就像我需要的那样。

我有一个用户单击以生成下拉菜单的锚点。菜单通过css显示在链接下方,但在DOM中,下拉列表的新div在锚点所在的div的“范围”之外生成。所以它是这样的:

选择之前:

<body>
    <div>
        <!-- load of other nested divs -->
        <div class="menu">
            <a href="#" id="clickAnchor">Select from this list</a>
        </div>
    </div>
</body>

选择后:

<body>
    <div>
        <!-- load of other nested divs -->
        <div class="menu">
            <a href="#" id="clickAnchor">Select from this list</a>
        </div>
    </div>
    <div class="selected">
        <ul>
            <li>...</li>
            <!-- lots of these -->
        </ul>
</body>

我使用<!-- load of other nested divs -->表示“菜单”嵌套在第一个主体div的深处。

我想要做的是当'selected'出现时我想要附加另一个类。这样我可以在其他地方重复使用下拉菜单。但出于以下两个原因中的一个或两个原因,我无法访问此课程:

1]它是动态添加的,所以我的jquery将类添加到它已经在页面加载时运行完毕。我无法使用$(".selected").on("click", function(event){},因为我没有点击“已选中”,而是点击了“clickAnchor”,因此我不确定如何以这种方式访问​​“已选择”。

2]从上面开始,当我尝试$("#clickAnchor").on("click", function(event){}时,没有任何事情发生 - 这是因为新的div被创建为<body>的直接子项,而不是'菜单的子项“?换句话说,它是否与click事件的范围有关? (这里可能完全错了)。

1 个答案:

答案 0 :(得分:2)

如果您无法控制附加div,则尝试使用模型。

$("#clickAnchor").on("click", function() {
    // code to append the div
    setTimeout(function() {
        var div = $(".selected");
        // add your code to add the class
    }, 0);
});

如果你将超时设置为0ms,它会在DOM插入div之后排队执行,所以你应该可以选择它。或者,你能否对执行select2.js脚本作出承诺?那么你就不需要超时了。