web-dev-qa-db-ja.com

Ajaxロードされたコンテンツのイベントをバインドする方法は？

AJAXで読み込まれたコンテンツをHTMLページのmyLink（appendedContainer）に挿入するリンクdivがあります。問題は、jQueryにバインドしたclickイベントが、appendedContainerに挿入された新しくロードされたコンテンツで実行されていないことです。 clickイベントは、AJAX関数でロードされていないDOM要素にバインドされています。

イベントがバインドされるように、何を変更する必要がありますか？

私のHTML：

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

私のJavaScript：

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

ロードするコンテンツ：

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>
javascriptjqueryhtmlajaxjquery-events
80
confile

動的に作成された要素にイベント委任を使用します。

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

これは実際に機能します。ここでは、dataの代わりにクラス.mylinkをアンカーに追加した例を示します--http://jsfiddle.net/ EFjzG /

178
lifetimes

.on（）が呼び出された後にコンテンツが追加される場合、ロードされたコンテンツの親要素に委任されたイベントを作成する必要があります。これは、.on（）が呼び出されたときにイベントハンドラーがバインドされるためです（つまり、通常はページの読み込み時に）。 .on（）が呼び出されたときに要素が存在しない場合、イベントはそれにバインドされません！

イベントはDOMを介して伝播するため、ページの読み込み時に存在することがわかっている親要素（下の例では.parent-element）で委任されたイベントを作成することでこれを解決できます。方法は次のとおりです。

$('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

主題に関するいくつかのさらなる読書：

19
Kai

あなたの質問が「ajaxロードされたコンテンツのイベントをバインドする方法」である場合、次のようにできます：

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

そのため、Ajaxコードごとに構成を配置する必要はありません。

6
antoniputra

JQuery 1.7以降、.live()メソッドは非推奨になりました。 .on()を使用して、イベントハンドラーをアタッチします。

例-

$( document ).on( events, selector, data, handler );
2
Elnaz

まだ解決策を探している人にとって、それを行う最善の方法は、ドキュメント自体にイベントをバインドすることであり、「準備完了」のイベントにバインドしないことです。

$(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    $.ajax({
        type: 'post',
        url: url,
        data: $(this).serialize(),
        success: function (data) {
            // DO WHAT YOU WANT WITH THE RESPONSE
        }
    });
});

}）;

1
Real-Source

ASP.NETの場合、これを試してください。

<script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>

これは、ページの読み込みと更新パネルの読み込みで機能するようです

完全な議論を見つけてください こちら 。

0
Michael

たとえば、ajax応答にhtmlフォーム入力が含まれている場合、これは素晴らしいことです。

$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});
0
ChristianG

代わりにjQuery.live（）を使用してください。ドキュメント ここ

例えば

$("mylink").live("click", function(event) { alert("new link clicked!");});
0
ROMMEL