文書の追加された要素のクリック検出

Question

現在、私のページのスクリプトには、その要素の1つが追加されており、テキスト、div、イメージなどの異なる要素をクリックしています。

jQuery hideメソッドを使用すると、すべてが非表示になり、1つの入力のみが表示されます。毎回正しい場合は残りの部分が表示され、新しい要素を追加できます。私のhtmlでdocumentIは、次のようになります方法を使用しています：

$(document).ready(function() { 
      hideUnused(); 
      $('#file_upload').uploadify({ 
      //all stuff from uploadify <- not important now 
      }) 
      document.onclick = function (evt) { 
      ClickDocument(evt); //<- important now 
      };}) 

そして、それは最初にページ上にあるすべてのための素晴らしい作品が、私は新しい要素を追加していたときに、それは彼らのように見えます（単に子方法を追加） ClickDocumentメソッドが見るDOMツリーの外にあります。

そして、それはClickDocument方法である：

function ClickDocument(e){ 
    e = e || event; 
    var target = e.target || e.srcElement; 
    alert(target.nodeName); 
    return; 
} 

それだけでそれをテストするためにめちゃめちゃ簡単です。 誰も私がそれで何ができるか考えている人はいますか？

私は1つのことを言い忘れました - 私はライブイベントをテストしていましたhttp://api.jquery.com/live/しかし、それは私の期待に合わないものです。 show/hideメソッドでは機能しません。

ご協力いただきありがとうございます。

編集：私は、私は2つの異なる方法で.delegate()方法を使用しました推薦してきたよう

。両方とも、古いHTMLコードを $(document).ready(function() から $("body").delegate(".kElement","click", function(evt){に変更しました。これは、クリック時に追加のアクションが必要なクラスエレメントがkElementです。 だから、最初のものはそのようになっています

$("body").delegate(".kElement","click", function(evt){ 
       e = evt || event; 
       var target = e.target || e.srcElement; 
       alert(target.nodeName); 

      }) 

と第二はそのようになっています

$("body").delegate(".kElement","click", function(evt){ 
       ClickDocument(evt);     
      }) 

だから私は私のオブジェクトをクリックしたときに警告を表示する必要がありますが、それはしません。私は間違って何をしていますか？

Answer 1

代わり.bind()

.live()の.live()を使用し、あなたのクリックイベントを結合/装着する一方で、イベントがあまりにも将来のすべての要素に適用されることを、保証します。

Answer 2

後でページに要素を追加していて、イベントが必要な場合は、イベント委任を使用する必要があります。簡単に言うと、これは要素のコレクションの親にイベントをアタッチし、子がクリックされたかどうかを確認することを意味します。たとえば

については

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

私はすべての子要素using the .on() method in jQuery

$('.parent').on('click', '.child', function(event){ 
    // Do something here 
}) 

.on（）とにイベントを添付することができます。off（）メソッドは、jQueryのイベントを処理する新しい方法です（通常のイベントも割り当てることができます）。しかし、古いバージョンのjQueryを使用している場合は、need the delegate() methodとなります。

.live（）は.delegate（）と同様に機能しないし、連鎖にも問題があるため（推奨されなくなりました）、避けてください。