我需要在单击事件内初始化猫头鹰轮播，例如以下代码，当我单击时它第一次起作用，但是当我再次单击它（在事件div上）时，它根本不起作用。我该怎么做？有没有办法重置猫头鹰轮播？
我将完整代码添加到本文的最后部分，以更好地了解我的pb并进行测试。
你能帮我这个忙吗？我真的需要这个
提前致谢，
中国民航总局
源猫头鹰轮播：http://owlgraphic.com/owlcarousel/demos/customJson.html
$('#XX').click(function(e) {
e.PreventDefault;
$("#owl-demo").owlCarousel({
jsonPath: 'json/customData2.json',
jsonSuccess: customDataSuccess
});
function customDataSuccess(data) {
var content = "";
for (var i in data["items"]) {
var img = data["items"][i].img;
var alt = data["items"][i].alt;
content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
}
$("#owl-demo").html(content);
}
});
我的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Dynamic content via JSON</title>
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item {
background: #a1def8;
padding: 10px 0px;
display: block;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
$('#XX').click(function(e) {
$("#owl-demo").owlCarousel({
jsonPath: 'json/customData2.json',
jsonSuccess: customDataSuccess
});
function customDataSuccess(data) {
var content = "";
for (var i in data["items"]) {
var img = data["items"][i].img;
var alt = data["items"][i].alt;
content += "<img src=\"" + img + "\" alt=\"" + alt + "\">"
}
$("#owl-demo").html(content);
}
});
});
</script>
</head>
<body>
<div id="owl-demo"></div>
<div id='XX'>Click HERE!</div>
</body>
</html>
最佳答案
你去：
JS：
$(document).ready(function () {
var owl = false;
$('#XX').click(function (e) {
if (owl) {
$("#owl-demo").data('owlCarousel').reinit({
jsonPath: '/echo/json',
jsonSuccess: customDataSuccess
});
} else {
owl = true;
}
$("#owl-demo").owlCarousel({
jsonPath: '/echo/json',
jsonSuccess: customDataSuccess
});
function customDataSuccess(data) {
console.log('loading Data');
data = testJSON;
var content = "";
for (var i in data["items"]) {
var img = data["items"][i].img;
var alt = data["items"][i].alt;
content += "<img src=\"" + img + "\" alt=\"" + alt + "\">";
}
$("#owl-demo").html(content);
}
});
});
reinit的方法位于文档底部的5. Owl Data methods下演示：http://jsfiddle.net/robschmuecker/pLvdx8xx/