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>我的文档中的单击事件处理程序。

这是我的 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

这将成功地用所有必要的内容填充我的页面，但是当我单击上一个或下一个 putton 之一时，我在控制台中收到此错误：

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')
  ); 
});

或者甚至只是在我的 jQuery 脚本执行之前使用一个很好的老式<script src="/assets/js/swipe.js"></script>，我一直得到同样的错误。

如果有人有任何建议，我将永远感激不尽。

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 回答