108

myLinkAJAX で読み込まれたコンテンツをdivHTML ページの (appendedContainer) に挿入する必要があるリンクがあります。問題は、clickjQuery でバインドしたイベントが、appendedContainer に挿入された新しくロードされたコンテンツで実行されていないことです。イベントは、clickAJAX 関数で読み込まれていない 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>
4

11 に答える 11

256

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

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

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

于 2013-05-16T22:03:18.523 に答える
29

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

Because events propagate up through the DOM, we can solve this by creating a delegated event on a parent element (.parent-element in the example below) that we know exists when the page loads. Here's how:

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

Some more reading on the subject:

于 2015-07-06T00:54:58.717 に答える
2

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

例 -

$( document ).on( events, selector, data, handler );
于 2016-01-03T12:07:02.083 に答える
0

代わりに jQuery.live() を使用してください。ドキュメントはこちら

例えば

$("mylink").live("click", function(event) { alert("new link clicked!");});
于 2013-05-16T22:05:55.707 に答える
0

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

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

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

議論の全文はこちらをご覧ください。

于 2014-07-02T15:58:55.833 に答える