クリックイベントによってスクリプトがアクティブ化されない

Question

こんにちは、jqueryでスクリプトを作成してクリックイベントにバインドしますが、コードはclickイベントでアクティブ化されません。しかし、私は別のJavaScript関数にスクリプトを置き、そのJavaScript関数をクリックイベントのリスナーにバインドするとき、関数はクリックで実行することができます。

もう1つは、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> 

ドム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

...わずかな変更で、このいずれかを試してみてくださいまだ存在するが後で作成される場合は、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() { ... 

Answer 2

HTMLは動的に作成されるため、イベントをバインドするにはon APIを使用する必要があります。

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

Answer 3

このジャバスクリプトを試してみてください。

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

Answer 4

あなたがいないDOMノードにクリックイベントハンドラを割り当てる必要がある場合

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