jQueryでスクリプトをリロードする方法

Question

私はここにいるので、私と一緒にご負担ください。スクロールするときにコンテンツをロードするためにjQuery infinite-scrollを使用しています。これはうまくいきますが、このコンテンツはajaxを使用してユーザーの入力に応じて変更されます。私がやりたいことは、ajaxコンテンツの読み込み時に無限のスクロールコードをリロード/リフレッシュすることです。

これは

プラグイン無限スクロールコードです：https://infinite-scroll.com/

$('#content').infiniteScroll({ 
    // options 
    path: '#page-nav a', 
    append: '.post', 
    history: false, 
    status: '.page-load-status', 
}); 

これは、コンテンツを再ロードするために私のAjaxコードです。

$("#searchContent :input").change(function() { 
    var formData = { 
     'title' : $('input[name=title]:checked').val(), 
     'tags' : $('input[name=tags]').val() 
    }; 
    $.ajax({ 
     type: "POST", 
     url: "get_content.php", 
     data: formData, 
     cache: false, 
     dataType:'json', 
     success: function(json) { 
     $("#content").html(json.content); 
     } 
    }); 
}); 

私がしたいことは、ajaxポスト機能を実行するときに無限のスクロールコードをリロードすることです。誰も私がこれを達成する方法を指摘することはできますか？あなたの時間を感謝します。

Answer 1

新しいDOMのための再起動のプラグインを行う必要があります。

$("#searchContent :input").change(function() { 
    var formData = { 
    'title': $('input[name=title]:checked').val(), 
    'tags': $('input[name=tags]').val() 
    }; 
    $.ajax({ 
    type: "POST", 
    url: "get_content.php", 
    data: formData, 
    cache: false, 
    dataType: 'json', 
    success: function(json) { 
     $("#content") 
     .html(json.content) 
     .infiniteScroll({ 
     // options 
      path: '#page-nav a', 
      append: '.post', 
      history: false, 
      status: '.page-load-status', 
     }); 
    } 
    }); 
}); 

---

サイドノート

通常無限スクロールは、ページネーションをクリックせずに自動ページを意味します。しかし、既存の要素に追加するのではなく、古いコンテンツを削除して新しいコンテンツを追加するだけです。あなたは正確に何をしようとしていますか？

あなたはJSONレスポンスから直接要素を追加している$('form').serialize()代わりのvar formData = {}

を試してみてください。たぶん、値を置き換えるテンプレートを試してみてください。