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

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

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

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

这样，你实际上是将事件处理程序绑定到容器，但由于大多数事件都冒出了DOM，因此点击该容器内任何元素触发的事件将到达容器本身。因为你指定了另一个选择器（`.textlayer＆gt; div'），jQuery将检查点击的实际元素是否满足这个选择器。

如果在绑定事件处理程序后创建了＃pageContainer2，您仍然可以将事件处理程序绑定到文档本身：

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

Answer 2

试试这个javascript：

  $(function() {
        $(".textLayer").click(function () {
            var index = $(".textLayer").index(this);
            alert("index of div is = " + (index+1));
        });
    });

Answer 3

稍加修改就试试这个...

$("#pageContainer2 > .textLayer > div").click(function () {
            var index = $(this).index();
            alert("index of div is = " + index);
        });

Answer 4

由于HTML是动态创建的，因此您必须使用on API来绑定事件。

$(function() {
   $(".textLayer > div", '#pageContainer2').on('click', function () {
       var index = $(this).index();
       alert("index of div is = " + index);
   });
});

脚本未被点击事件激活

4 个答案: