脚本未被点击事件激活

Question

您好我在jquery中编写了一些脚本并将其绑定到click事件,但是单击事件不会激活代码.但是当我将脚本放在另一个JavaScript函数中并将该JavaScript函数绑定到单击事件监听器时,该函数能够在单击时执行.

另一件事是,当我使用JavaScript绑定脚本时,它返回警报消息的时间与我点击的div的数量相同,即如果我点击第3个div,警报消息在我的页面上显示三次dom结构是pdf.js项目,这个dom是动态创建的我想获取用户点击过的pagecontainer2的孙子的索引是我的脚本:

<script type="text/javascript">
    $(function() {
        $(".textLayer > div", "#pageContainer2").click(function () {
            var index = $(this).index();
            alert("index of div is = " + index);
        });
    });
</script>

Dom CODE:

<div id="pageContainer2" >
    <canvas id="page2" width="741" height="959"></canvas>
    <div class="textLayer">
        <div>......some text here....</div>
        <div>......some text here....</div>
        <div>......some text here....</div>
    </div>
</div>

<div id="pageContainer3" >
    <canvas id="page3" width="741" height="959"></canvas>
    <div class="textLayer">
        <div>......some text here....</div>
        <div>......some text here....</div>
        <div>......some text here....</div>
    </div>
</div>?

Answer 1

如果需要将单击事件处理程序分配给尚未存在但稍后将创建的DOM节点,则需要使用on并指定子节点将事件处理程序绑定到现有节点:

假设<div id="pageContainer2">已经存在,但是您正在动态地在该容器内创建这些div.所以正确的sytnax将是:

$(function() {
    $('#pageContainer2').on('click', '.textlayer > div', function() {
        /* .... */
    });
});

这样,您实际上将事件处理程序绑定到容器,但由于大多数事件冒泡DOM,因此通过单击该容器内的任何元素触发的事件将到达容器本身.因为您指定了另一个选择器(`.textlayer> div'),然后jQuery将检查被点击的实际元素是否满足此选择器.

如果在绑定事件处理程序之后创建了#pageContainer2,您仍然可以将事件处理程序绑定到文档本身:

$(document).on('click', '#pageContainer2 .textlayer > div', function() { ...