0

現在のモバイル プロジェクトでは、Brad Birdsall の Swipe.jsプラグインを、タッチ フレンドリーでライブラリに依存しないスライダー用のプラグインとして使用しています。ページの読み込み時にスライダーを設定すると、すべてがうまく機能します。ただし、スライダーを$.ajax()クリックして入力しようとすると、スライダーはすべてのスライドを受け取りますが、タッチ イベントやスライダーに関連付けられたメソッドには反応しません。

一般的なスライダーの HTML 構造は次のようになります。

<div id="slider" class="swipe">
  <ul>
    <li style='display:block;'>
      <img src="/someImageUrl.jpg" />
    </li>
    <li style='display:none;'>
      <img src="/someImageUrl.jpg" />
    </li>
  </ul>
</div><!-- .swipe -->
<nav>
  <a href="#" class="prev" onclick="slider.prev();return false;">PREV</a>
  <a href="#" class="next" onclick="slider.next();return false;">NEXT</a>
</nav>

$.ajax()応答を使用し<li><img src="..." /></li>て、ドキュメントの on a click イベント ハンドラーを設定しています。

ここに私のJSがあります：

$.ajax({
  url: "process.inc.php?vehicleId=" + vehicleId,
  type: "GET",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
    var swipeSlides = "";
    for (i = 0 ; i < data.length; i++) {
      var photoUrl = data[i].photoUrl;
      var photoArray = photoUrl.split("|");

      if (photoArray.length <= 1) {
        list += "<img src="+photoArray[i]+" />"
      } else {
        for (i = 0; i < photoArray.length; i++) {
          swipeSlides += "<li><img src='"+photoArray[i]+"' /></li>"
        }
        var prevNext = "<nav><a href=\"#\" class=\"prev\" onclick=\"slider.prev();return false;\">PREV</a><a href=\"#\" class=\"next\" onclick=\"slider.next();return false;\">NEXT</a></nav>"
        var sliderElement = $(self).parent().find("#data #slider ul");
        sliderElement.find("li, nav").remove();
        sliderElement.append(swipeSlides, prevNext);      
        $.getScript('../assets/js/swipe.js');
        var slider = new Swipe(
          document.getElementById('slider')
        );            
      };
    };

  } // end success function
}); // end AJAX

これにより、ページに必要なすべてのコンテンツが正常に読み込まれますが、前または次のプットンのいずれかをクリックすると、コンソールに次のエラーが表示されます。

Uncaught TypeError: Object #<HTMLCollection> has no method 'next'

これは、スクリプトがページに適切にロードされていないか、スライダーが適切なタイミングでインスタンス化されていないことを示しています。

$.getScript()次のように、メソッド内でコードを実行しようとしました。

$.getScript('../assets/js/swipe.js', function(data, textStatus, jqxhr) {
  for (i = 0; i < photoArray.length; i++) {
    swipeSlides += "<li><img src='"+photoArray[i]+"' /></li>"
  }   
  var prevNext = "<nav><a href=\"#\" class=\"prev\" onclick=\"slider.prev();return false;\">PREV</a><a href=\"#\" class=\"next\" onclick=\"slider.next();return false;\">NEXT</a></nav>"
  var sliderElement = $(self).parent().find("#data #slider ul");
  sliderElement.find("li, nav").remove();
  sliderElement.append(swipeSlides, prevNext);  
  var slider = new Swipe(
    document.getElementById('slider')
  ); 
});

<script src="/assets/js/swipe.js"></script>または、jQuery スクリプトを実行する前に古き良き方法を使用するだけでも、まったく同じエラーが発生し続けます。

誰かに提案があれば、私は永遠に感謝します。

4

2 に答える 2

0

私は問題を理解しました。

Swipe 要素のインスタンス化を認識させるために、関数 $.globalEval()内で使用する必要がありました。$.getScript()

私の作業コードは次のとおりです。

$.ajax({
  url: "process.inc.php?vehicleId=" + vehicleId,
  type: "GET",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
    var list = "";
    for (i = 0 ; i < data.length; i++) {
      var photoUrl = data[i].photoUrl;
      var photoArray = photoUrl.split("|");

      if (photoArray.length === 1) {
        list += "<img class='noPhoto' src="+photoArray[i]+" />";

        var parent = $(self).parent().find("#data");
        parent.find("table, .noPhoto").remove();
        parent.append(list);

      } else { 

        list += "<div id=\"slider\" class=\"swipe\"><ul>";

        for (i = 0; i < photoArray.length; i++) {
          list += "<li><img src='"+photoArray[i]+"' /></li>"
        }   
        list += "</ul><nav><a href=\"#\" class=\"prev\" onclick=\"slider.prev();return false;\">PREV</a><a href=\"#\" class=\"next\" onclick=\"slider.next();return false;\">NEXT</a></nav></div>";
        var parent = $(self).parent().find("#data");

        parent.find("table, div").remove();
        parent.append(list); 

        $.getScript("../assets/js/swipe.js", function(data, textStatus, jqxhr) {
          $.globalEval("var slider = new Swipe(document.getElementById('slider'));") 
        });   
      };
    };
  } // end success function
}); // end AJAX

うまくいけば、これは他の誰かの助けになります。

于 2012-10-04T19:28:13.063 に答える
0

そもそも getScript を使用する理由 （JavaScriptファイルの前に）他のJavaScriptファイルに追加すると、 new Swipe() が機能するはずです。

また、後で Swipe オブジェクトの関数を呼び出したい場合は、ajax 関数の外側で var を宣言する必要があります。例：

var mySwipe;
document.ready(function(){
  //...
});

function pullFromAjaxFunction() {
  //... do some more stuff
  mySwipe = new Swipe(...)
}
于 2013-02-18T15:14:32.660 に答える