jQueryで新しいdivを動的に作成して使用しますか？

Question

私はこの後、私はそれがインクルードはDOMの一部ではないことを、それらを追加した後に可能であると思うspans

をクリックして使用することはできません、しかし、この

$(document).ready(function(){ 
    var conntent = $("#conntent"); 
    $('#form_post').submit(function(){ 
     if($("#set").val() != ''){ 
      $.post('post.php', $("#form_post").serialize(), function(data){ 
       conntent.append('<div class="item"><span>' + data + 
       '</span></div>'); 
      }); 
     } 
     $("#set").val(''); 
     return false; 
    });  

    //Then I try to click on new the new element 

     $('span').click(function(){ 
      alert("OK"); 
     }); 
    }); 

を試してみました。助言がありますか？

Answer 1

は、このコードです：

前 このコードを実行している

$('span').click(function(){ 
    alert("OK"); 
}); 

：

conntent.append('<div class="item"><span>' +data + '</span></div>'); 

これは非常にPOSTが非同期であるため、可能性があります。

jQuery's .live() or .delegate()を使用して、まだDOMに追加されていない要素にバインドできます。こうすることで、クリックイベントが動的に追加されると、自動的にそのイベントにバインドされます。

また、POSTの後に.click(function())への呼び出しを行うだけであれば、全体の外ではなく応答で呼び出すことができます。このような何か：

$.post('post.php', $("#form_post").serialize(), function(data){ 
    conntent.append('<div class="item"><span>' +data + '</span></div>'); 
    $('span').click(function(){ 
     alert("OK"); 
    }); 
}); 

個人的に私は.delegate()アプローチを選ぶと思いますが、全体的な構造は、あなた次第です。そのページの人生であなたがでない場合がありますバインドしたい、私は知らない。

Answer 2

それが動作しない原因かもしれない2つの可能な理由があります あなたは「スパン」はDOM ソリューションの一部である前にイベントをバインドしようとしている第一は、この後にバインドイベントです：

多分

conntent.append('<div class="item"><span>' +data + '</span></div>'); 
$('span:last').bind('click', handler); 

第二あなたはこの

$('span', conntent).bind('click',handler) 

歓声:)