-1

こんにちは私はjqueryでいくつかのスクリプトを記述し、それをクリックイベントにバインドしますが、コードはクリックイベントによってアクティブ化されません。しかし、スクリプトを別のJavaScript関数に配置し、そのJavaScript関数をクリックイベントリスナーにバインドすると、関数がクリック時に実行できるよりも多くなります。

もう1つは、JavaScriptを使用してスクリプトをバインドすると、クリックしたdivの数と同じ回数のアラートメッセージが返されることです。つまり、3番目のdivをクリックすると、警告メッセージが私のページに3回表示されます。は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>

ドムコード：

<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

まだ存在していないが後で作成される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() { ...
于 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 に答える