-1

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

另一件事是，当我使用 JavaScript 绑定脚本时，它返回的警报消息与我单击的 div 的数量相同，即如果我单击第 3 个 div，则警报消息在我的页面上显示 3 次 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 代码：

<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>​
4

4 回答 4

5

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

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

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

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

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

$(document).on('click', '#pageContainer2 .textlayer > div', function() { ...
于 2012-04-17T07:11:42.930 回答
1

试试这个javascript：

  $(function() {
        $(".textLayer").click(function () {
            var index = $(".textLayer").index(this);
            alert("index of div is = " + (index+1));
        });
    });
于 2012-04-17T06:37:53.343 回答
1

稍微修改一下试试这个...

$("#pageContainer2 > .textLayer > div").click(function () {
            var index = $(this).index();
            alert("index of div is = " + index);
        });
于 2012-04-17T07:03:05.370 回答
0

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

$(function() {
   $(".textLayer > div", '#pageContainer2').on('click', function () {
       var index = $(this).index();
       alert("index of div is = " + index);
   });
});
于 2012-04-17T06:33:33.843 回答