2

これは「ばかげている」ように聞こえるかもしれませんが、次のようにページにロードされる単純なカレンダーがあります。

jQuery('#calendar .show_hide').load('plugins/calendar.html', function(){ // do something // });

それは問題ではない

カレンダーには、月をスクロールする 2 つのリンクがあります。典型的な次の前のリンクです。だから私の負荷関数の中に私はこれを持っています

jQuery('#calendar .show_hide').load('plugins/calendar.html', function(){
   jQuery('a.month_change').on('click',function(){  
    jQuery.ajax({
      type: "post",
      data: jQuery(this).attr('href').replace('#',''),
      url:  'plugins/calendar.html',
      success:function(msg){
        jQuery('#calendar .show_hide').html(msg);
                  }
    });
});

});

ここで、a.month_change は、前/次のリンクに関連付けられたクラスです。Ajax ポストはデータを送信し、html を返します。ここまでは順調ですね。

最初に a.month_change をクリックすると機能しますが、その後は毎回ページが読み込まれません。私が試し.live('click;,function ...ても、最初は何も起こりません。

私は常にこれらのことで混乱します。これは、ページを動的にロードし、ajax 呼び出し/リンクなどを常に機能させる正しい方法です。動的ロードと ajax 受信ページが同じページであることに注意してください - plugins/calendar.html と JQ バージョンは jquery-1.9.0 です

4

9 に答える 9

3

Live は 1.7 以降非推奨であり、1.9 で削除されました。このように使用する必要があります

$(document).on('click','selector',function(){

});

より近い静的要素がある場合は、ドキュメントの代わりに最も近い静的要素を使用する必要があります。

于 2013-02-28T09:11:57.803 に答える
2

live()が減価償却されている場合は、on()代わりに関数を使用する必要があります。

$(document).on('click','selector',function(){

});
于 2013-02-28T09:11:25.750 に答える
1

ここでの回答はどれも、それを使用する方法やドキュメントを効果的に示していないので、どうぞ。

jQuery(document).on('click', 'a.month_change', function(){ 
    jQuery.ajax({ 
        type: "post", 
        data: jQuery(this).attr('href').replace('#',''), 
        url: 'plugins/calendar.html',             
        success:function(msg){ 
            jQuery('#calendar .show_hide').html(msg); 
        } 
    }); 
});

対象となる最初の要素は、ページの読み込み中に存在する静的要素であり、次にキャプチャするイベント、その後にイベントをバインドする必要がある要素が続きます。これは、新しいバージョンの jQuery でのイベント委任です。.live()、またはを使用する必要はありません.bind()。

jQueryの .on() のドキュメントは次のとおりです

于 2013-02-28T09:14:14.847 に答える
0

.clickおよび.bindは、ページの読み込み中にDOMに現在存在するdom要素とバインドしています。

.live後でAjaxまたはJavascriptによってDOMに入力される可能性のある要素のイベントをアタッチするために使用されるものです。しかし、.liveにはパフォーマンスに関連する大きな問題があります。

これを克服するため$.delegateに、DOM階層でより優れたパフォーマンスを導入します。

最新のJquery1.7以降で.onは、要素がDOMに入力されるたびに、イベントを要素（ランタイム）にバインドするために使用されます。パフォーマンスが向上し、.liveこのサイトで詳細情報を入手できます http://api.jquery.com/live/jQuery イベントバインディングのインサイトに提供されます

于 2013-02-28T09:17:48.683 に答える
0

私はあなたが使用することを好み、お勧めします..この投稿on()を見て、直接および委任された方法の詳細を学ぶことができます....on

$(document).on('click','yourselector',function{....});

これにより、常に静的なドキュメントにクリック イベントが委譲され、イベントを配置するセレクターが検出されます。ただし、ドキュメントのパフォーマンスは賢明ではないため、最も近い静的要素を使用することが常に推奨されます。

于 2013-02-28T09:16:14.987 に答える
0

他の答えはどれもあなたがそれを作るポイントに対処していないので:

最初に a.month_change をクリックすると機能しますが、その後は毎回ページが読み込まれません

それでは、説明を試みましょう…

あなたのコードは実際には 2 つの AJAX 呼び出しを行っています.load()。.ajax()

.ajax()クリック イベントが 1 回だけ発生するという問題は、呼び出しの成功ハンドラーでカレンダーの HTML を置き換えて、以前にクリック ハンドラーをバインドした要素jQuery('#calendar .show_hide').html(msg);を置き換えているために発生します。a.month_change

修正は、AJAX 呼び出しによって置き換えられていないページ内の要素でキャプチャされるようにクリック イベント バインドを移動することです。

要素の例#calender：

jQuery('#calendar').on('click', 'a.month_change', function(){ ... });

したがって、 内のすべてのコンテンツを置き換えることができ#calendar、クリック イベントは引き続きキャプチャされ、静的先祖要素のクリック ハンドラーによってフィルター処理されます。

.live()v1.9で削除された他の回答が述べているように、正しい.on()方法を使用していますが、間違った場所にいます。

于 2013-02-28T09:23:06.697 に答える
0

.on()動的に追加された にも機能するため、使用してDOMください。

.live()新しいバージョンから廃止されました。

テストを実行

試す

<script type="text/javascript">

    $(function()
    {
        jQuery('a.month_change').on('click',function()
        {
            jQuery.ajax(
            {
                type: "post",
                data: jQuery(this).attr('href').replace('#',''),
                url:  'plugins/calendar.html',
                success:function(msg)
                {
                    jQuery('#calendar .show_hide').html(msg);
                }
            });
        });

        jQuery('#calendar .show_hide').load('plugins/calendar.html', function()
        {

        });    
    });

</script>
于 2013-02-28T09:11:27.113 に答える
0

Jqueryonメソッドを使用するのが最善です。.live() は新しいバージョンから廃止されました。

例えば;

$('#yourElement').on('click',function(){});
于 2013-02-28T09:11:42.647 に答える
0

Try 

$(parentcontainer).on('click',elementtoclick,function(...){....});

Usually bind in this way solved my problems with new HTML contents

于 2013-02-28T09:12:36.290 に答える