Question

我正在使用Brad Birdsall's 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

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

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>，并且我一直得到同样的错误。

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

Answer 1

我发现了问题。

为了识别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

希望这可以帮助其他人。

Answer 2

为什么首先使用getScript？将其附加到您的其他JavaScript文件中（在您的javascript文件之前），然后新的Swipe（）应该可以正常工作。

此外，如果您想稍后调用Swipe对象的函数，则应该在ajax函数之外声明var。例如：

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

function pullFromAjaxFunction() {
  //... do some more stuff
  mySwipe = new Swipe(...)
}

使用带有$ .ajax（）内容的swipe.js

2 个答案: