與$阿賈克斯（）的內容

使用swipe.js我使用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') 
); 
});

甚至只使用一個良好的老式<script src="/assets/js/swipe.js"></script>之前我jQuery腳本執行，我不斷收到完全相同的錯誤。

如果任何人有任何建議，我將永遠感激。

來源

2012-10-04 robabby

我想出了這個問題。

爲了讓Swipe元素的實例化得到識別，我需要在$.getScript()函數中使用$.globalEval()。

繼承人我的工作代碼：

$.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-04 19:28:13 robabby

爲什麼首先使用getScript加入？將其附加到您的其他JavaScript文件（在JavaScript文件之前），然後新的Swipe（）應該可以工作。

另外，如果你想以後叫你的橫掃對象的功能，你應該聲明你的AJAX功能之外的變種。例如：

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

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

來源

2013-02-18 15:14:32

與$阿賈克斯（）的內容

回答

相關問題