1

ホームページにスライダーがあります。Ajaxを使用してボタンをクリックすると、次の5つの投稿をロードしようとしています。Jquery .postを使用して次の5つの投稿のhtmlを読み込むと、スライダーが消えます。原因は、新しく追加されたhtmlで「slider.js」というスクリプトが機能しないためです。.live（）を使用してみましたが、機能しませんでした。コンソールでAjax呼び出しからの応答を確認できるので、呼び出しが機能していることがわかります。jsファイルをAjax応答に含めようとしましたが、それでも起動しません。jsファイルは多くの機能を備えた長いファイルであり、フォーラムの一部の人々によって提案されているように、1つの機能で囲むことはできません。どうすればslider.jsをリロードして機能させることができますか？これがajax.post（）コードです。

$(function() { 

   $('.nextfive').live('click', function() { 

      var data = {action: 'next_five',next: 5};

      jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,

      function(response) {

             $('#navi').slideDown("slow");  
             $("#slidercontainer").html(response); 

          },"html");   

      }); 
});

編集：http ：//axactsoft.com/samplewp/のページを確認し、上部のボタンをクリックしてください'クリックファイブ'。ファイルのコードはここに貼り付けられますhttp://pastebin.com/4iS6Ey10

4

2 に答える 2

1

どのslider.jsを使用していますか？おそらく、phpスクリプトからデータを取得した後、イベントリスナーを追加してスライダーを再初期化できます。スライダーの動作によって異なりますが、このようなものです。

$('.nextfive').click(function () {
    $.get("<?php echo admin_url('admin-ajax.php'); ?>",
          {action :'next_five', next   : 5},
          function (resp) {
              $('#navi').slideDown("slow");  
              $("#slidercontainer").html(response)
              $("#slidercontainer").slider(); /* This will change depending on
                                               * the library you are using */
    });
})

また、コーディングスタイルに関するいくつかの点：

  1. 次の5つの投稿などのデータを取得し、データを変更しない場合は、POSTではなく常にGETを使用してください。従来、サーバー上で何かを変更する場合を除いて、常にGETが使用されます。変更する場合は、POSTを使用します。
  2. jQuery。*は$。*に置き換えることができます。上記の例を参照してください。
  3. クリックハンドラーを要素にアタッチする（つまり、何かをクリックしたときに何かを発生させる）最も簡単な方法は、jQueryで$（elem）.click（）関数を使用することです。私の例を参照してください。

使用しているスライダーの詳細を教えていただければ、より具体的なコードをお手伝いできます。

幸運を！4.その他の小さな簡略化では、varデータを一度だけ使用する場合は、varデータを定義する必要はありません。もう一度私の例を参照してください。

于 2012-04-04T20:30:21.237 に答える
1

これで試してください：

$('.nextfive').on({ 

    click: function () {

              var data = {action: 'next_five',next: 5};

              $.post("<?php echo admin_url('admin-ajax.php'); ?>", data,

              function (response) {

                 $('#navi').slideDown("slow");  
                 $("#slidercontainer").html(response);
              }
     }    

}, 'body');

.on（）関数を使用するには、jquery1.7以降を使用する必要があります。使用しているすべてのdivIDのHTML構造を見ずに、何をしているのかを知ることは困難です。

また、コードを分割することをお勧めします。ajaxコールバックを処理する関数をネストする、ajaxの関数を保持するイベントハンドラーがあります。イベントハンドラーにイベントを処理させ、パラメーターをajaxのみを処理する別の関数に渡し、その関数にajax応答の処理のみを処理する関数を呼び出させます。3つの関数を相互にネストするのではなく、同じスコープ内に3つの関数を配置する必要があります。

于 2012-04-04T20:14:43.900 に答える