2

私は ajax を使用して、WordPress サイトの投稿を読み込みます。

各投稿内には、jquery の toggleClass 関数で非表示にされている共有ボタンを含む非表示の div があります。

それは本当に簡単です。

$(document).ready(function(){ 
    $(".sharing-mp").click(function() {       
      $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible');
    });    
});

問題は、ajax で読み込まれた投稿では機能しないことです。DOM に追加され、.ready 関数がそれらを見つけられないためだと思います。それを行う他の方法はありますか？

4

3 に答える 3

7

動的に読み込まれた要素のクリック イベントをバインドするには、on() を使用する必要があります。イベントは、要素が動的に追加された親要素またはドキュメントに委任できます。

$(document).ready(function(){ 
     $(document).on("click", ".sharing-mp", function() {     
         $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible');    
     });    
});
于 2013-03-28T06:07:40.973 に答える
1

おそらく、それらのクラスの 1 つだけが必要です。

share-mp-hidden と shared-mp-visible は、単に互いに反対のように聞こえます。したがって、一方はもう一方を持っていdisplay: none;ますdisplay:block;。2 つのクラスの代わりに、デフォルトを次のように設定できますsharing-mp。display:block;

また、同じことを行う show および hide 用の jquery 関数もあります。

于 2013-03-28T06:12:23.603 に答える
0

はい.on()、ページの読み込み時に利用可能だった親へのハンドラーでイベント委任を使用する必要があります。これは、他のすべての要素の親であるため、それ自体である可能性があります。または、ポスト ホルダー div やコンテンツ コンテナーなど$(document)で利用可能な最も近い利用可能な親にイベントを委任しようとすることもできます。doc ready

それにもかかわらず、これは機能します：

$(document).ready(function(){ 
    $(document).on('click', '.sharing-mp', function() {       
      $(this).toggleClass('sharing-mp-hidden sharing-mp-visible');
    });    
});
于 2013-03-28T06:21:01.660 に答える