動的に追加された要素にイベントをバインドする - jquery、html、ajax

新しく追加した関数にバインドしようとしていますjqueryを使った要素...私はオンラインでたくさんの例を試しましたが、どういうわけか私には何の効果もありません。私はidとボタンを持つフォームを作成しました。送信時にajaxは別のページから要素をロードし、現在のウェブサイトにhtmlを挿入します。すべてうまくいくようですが、新しくロードされた要素にはイベントがバインドされていません。 これがHTMLです。

<form id="tclick" method="post" action="${tg.url("/entryCmd")}">
<input type="hidden" name="id" value="${entries[0].id}"  />
<input type="submit" value="submit"/>
</form>

そしてjQuery：

$("#tclick").on("submit", function(data){
var h = $(this).serialize();
var d;

$.get($(this).attr("action"), h,
function(returnData) {
d = returnData;
}
);

$(this).ajaxStop(function(){
$(this).after($(d).find(".edit-content").html());
});

return false;
});

edit-content divはform要素の直後にロードされます。それはいくつかの要素を持っています、それはjQuery関数に縛られるべきです。

回答：

これを行うには、基本的に2つの選択肢があります。

1. 新しいHTMLを追加した後にあなたのイベントをバインドします。

   $(this).ajaxStop(function(){
   $(this).after($(d).find(".edit-content").html());
   // do you binding here
   });
   

2. イベント委任を使用する 。に（） または .delegate（））。

   $(".some-container").on("click", ".edit-button", function(e) {...});
   

   これは、クラス.edit-buttonを持つすべての子に対してclickイベントを要素.some-containerに委譲します。後者が既にdomに入っていたり、後でロードされた場合は関係ありません。

ページロード後にDOMに追加される要素にイベントを追加するには、どちらかを使用する必要があります。 delegate()または、「jQuery 1.7以降を使用している場合」 on().

$(".edit-content").delegate("#myDiv", "click", function() {
// do stuff when #myDiv gets clicked.
});

API：
代議員
に