2009-02-25 14 views
9

このdivの中にいくつかのHTMLを追加したいのですが、HTMLにもclickイベントが必要です。jQueryを使用してHTMLイベントを追加する

<div id="myID"> 
     <p>hello, world!</p> 
    </div> 

上記のdivの内側に新しいdivを挿入して、そこに挿入する新しいHTMLにclickイベントを挿入します。新しいdivの中にいくつかの動的テキストがあるので、動的に作成する必要があります。

どうすればできますか?

答えて

12

何について:jQueryの1.3のよう

$("#myID").click(
    function() { 
    var someText = "my dynamic text"; 
    var newDiv = $("<div>").append(someText).click(function() { alert("click!"); }); 
    $(this).append(newDiv); 
    } 
) 
0

アンドリュー解決:

<div class="myClass"> 
<p>hello, world!</p> 
</div> 


$(".myClass").live("click", function(){ 
    $(this).after("<div class='myClass'><p>Another paragraph!</p></div>"); 
}); 

このページのライブイベントについての詳細を参照してください。この問題は私に!しかし、.liveは最近のバージョンのjqueryでは廃止されました(1.7以降)。これらのイベントタイプをバインドするには、top.documentの.onまたは.delegateを使用します。参照:

$(document).on(".myClass", "click", function(){ 
    $(this).after("<div class='myClass'>Another paragraph!</div>"); 
}); 

おめでとう私の友人!

1

重要:

は、あなたが最も具体的なセレクタを使用した場合、パフォーマンスが良くなければならないことを考慮してください。あなただけの「MYID」のdivの内側のdivに影響を与える場合は、このケースでは、あなたが使用する必要があります。

$("#MyId").on("click", "div", function(e) { 
    // Whatever you want to do when the divs inside #MyId div are clicked 
}); 

VERY IMPORTANT:

は、ことを考慮にメソッドの第二引数を取りますこの場合「div」はオプションですが、イベントを自動的に作成されたアイテムにアタッチする必要がある場合は、それを指定する必要があります。これは、 "on"メソッドのjqueryドキュメンテーションでは延期と呼ばれます。私はこの情報が将来これを読んでいる人にとって時間を節約してくれることを願っています:)

関連する問題