如何使 ajax 请求的数据加载生效？ 我在主页上进行了一些深入研究，并从 ajax 加载了更多请求，capty 可以很好地处理主要数据，但不能处理从 ajax 请求加载的数据，我尝试在 ajax 结果中添加 capty 函数，但较旧的 div 显示黑屏。
我如何使用 capty 来处理来自 ajax 请求的数据？
索引:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Capty</title>
<link rel="stylesheet" href="css/jquery.capty.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.capty.js"></script>
<script type="text/javascript">
$(function() {
$('.detail').capty({
height: 163,
width: 200,
opacity: .8,
animation: 'fade',
speed: 400
});
});
$(function() {
$("#more").on("click", function() {
var ID=$(".box:last").attr("id");
$.post("ajax/more.html",
function(data){
$(".box:last").after(data);
});
});
});
</script>
</head>
<body>
<div id="holder">
<div class="box" id="1">
<div class="detail" name="#info-1">detail 1</div>
<div id="info-1" class="info">info 1</div>
</div>
<div style="clear:both"></div>
<div id="more">more</div>
</div>
</body>
</html>
CSS:
@CHARSET "UTF-8";
#holder{
padding: 0px 0px;
margin: 20px auto;
width: 800px;
background:#CC9;
}
#more {
padding:10px 10px;
background:#CCF;
width: 30px;
margin: 50px auto;
cursor:pointer;
float: left;
}
.box {
float:right;
margin:5px 7px;
height:163px;
width:198px;
background: #F2F2F2;
border: 1px solid #2A5F86;
}
.detail {
width:198px;
height:163px;
background: none;
}
.info {
margin: 0px auto;
width: 178px;
height: 148px;
background: none;
border: 0px solid #DDDDDD;
padding: 0px 0px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
div.capty-caption {
background-color: #000;
color: #FFF;
font-size: 11px;
text-shadow: 1px 1px 0 #222;
border-radius: 0px 0px 3px 3px;
width: 198px;
max-width: 198px;
min-width: 198px;
height: 163px;
min-height:163px;
max-height:163px;
}
div.capty-caption a {
color: #318DAD;
font-size: 11px;
text-decoration: none;
text-shadow: none;
}
.capty-wrapper {
height: 150px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width:198px;
min-width:198px;
max-width:198px;
height: 163px;
min-height:163px;
max-height:163px;
background:none;
}
Ajax :
<div class="box" id="1">
<div class="detail" name="#info-1">detail 1</div>
<div id="info-1" class="info">info 1</div>
</div>
jQuery Capty - 一个字幕插件 - http://wbotelhos.com/capty 插件也可以在 github 上找到。
最佳答案
当您从 ajax 加载数据时，其元素不会使用触发器自动更新。
当您加载您的 ajax 时，您还需要对它们调用 .capty()。
这是一个例子:
function(data){
$(".box:last").after(data);
$(".detail",".box:last").capty({
height: 163,
width: 200,
opacity: .8,
animation: 'fade',
speed: 400
}) ;
});
注意 $() 选择器中的顺序。第一个真的是最后一个。
所以选择器会首先找到“.box:last”，然后才会在其中执行 find() 搜索类“detail”
===编辑开始===
除了 ajax 返回的数据必须包含唯一 ID 而您的 ajax/more.html 是您在主体中拥有的内容的副本外，更改后的代码将起作用。 请考虑更改 ID。 当我自己更改它们时，它起作用了: 细节 2 信息 2
请参阅 fiddle :http://jsfiddle.net/5K3nq/我把你的来源复制到的地方。
我没有调用 $.post()，而是调用了函数 greg()，它返回你的 ajax 应该返回的内容(除了它包含我的更改。)滚动结果窗口向右查看您的方 block 。
===编辑结束===
希望对您有所帮助。
附言。在 jQuery 中，使用一个函数在整个页面已加载时初始化所有元素:
$(document).ready(function(){
// Now, I know the page has completely loded.
// All initialization comes here.
});
关于jquery - 使 Jquery Capty 对来自 ajax 请求的数据产生影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20411544/