3

重複の可能性：
jqueryとHTML 5を使用して新しいパーツをロードすると、新しいパーツでjavascriptが機能しない

Ajaxを使用して、メインのHTMLページのdivに別のHTMLページをロードしました。ページは正常に読み込まれましたが、読み込まれたページにjQUeryを適用しようとすると、何も機能しません。

$('.mainDiv').click(function(ev) {
    ev.preventDefault();
    var url = $(this).attr('href');
    $('.secondDiv').load('http://127.0.0.1:8000'+url);
});

すべてのリンクで呼び出される単純なアラート関数を使用して機能するかどうかを確認しようとしましたが、.jsファイルが両方のページにリンクされている場合でも、アラートはメインページのリンクにのみ表示されます。

$('a').click(function(){
    alert('hey');
});

どうすればこれを修正できますか？.load（）の代わりに.live（）または.on（）を使用すると、問題が解決しますか？

4

3 に答える 3

6

を使用$('body').on('click', 'a', function(event){...})すると機能します。

onで呼び出されるため<body>、新しいコンテンツを読み込むときにイベントが消去されることを心配する必要はありません。

このイベントを特定のアンカーのセットでスコープする場合は、次のようなものを使用して、2番目のパラメーターのクラスで名前の間隔を指定することをお勧めします。

$('body').on('click', '.mainDiv .secondDiv a', function(event){...})

これをブートストラップで1回設定することにより、コード内の多くの複雑さを軽減できます。これで、コンテンツをロードするだけで済みます。イベントロジックを抽出したので、コールバックをインラインで定義する必要はありません。

$('a').on(...)バインドされているDOM要素が消去されるか、呼び出し時にページに表示されない可能性があるため、機能しません。呼び出しの2番目のパラメーターはon、ルート要素（bodyこの場合）の下に表示される新しい要素を参照するために使用されます。

于 2012-11-01T19:44:56.707 に答える
1

これはあなたがする必要があることです：

$('.secondDiv').on('click', 'a', function() {
    alert('hey');
});

したがって、基本的に、secondDivにロードされたすべての動的アンカータグは、この関数に自動的にバインドされます。そうでなければ、あなたができることは次のとおりです。

$('.secondDiv').load('http://127.0.0.1:8000'+url, function(){
    $(this).find('a').click(function(){
        alert('hey');
    });    
});

しかし、前者がうまく機能するのであれば、後者はお勧めしません。

于 2012-11-01T19:46:41.443 に答える
0

ここでは$.ajax（）の方が良いかもしれないというKevinBに同意します。次に、コールバックでクリックイベントを設定できます。

$.ajax({
   url: 'http://127.0.0.1:8000'+url,
   dataType: 'html',
   succcess: function(data){
      $('.secondDiv').append(data);
      $('.secondDiv a').click(function(){
         alert('hey');
      });
   }
});
于 2012-11-01T19:56:08.160 に答える