使jQuery Capty对数据的影响来自ajax请求

Question

capty如何影响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上可用。

Answer 1

从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”，然后才在其中查找类“ detail”的find() 。

===编辑开始===

更改后的代码将起作用，除了ajax返回的数据必须包含唯一的ID，而ajax / more.html是主体内容的副本。 请考虑更改ID。 当我自己更改它们时，它起作用了：detail 2 info 2

请参阅小提琴： http : //jsfiddle.net/5K3nq/ ，我将您的源代码复制到其中。 我没有调用$.post()而是调用$.post()函数greg() ，该函数返回您的ajax应该返回的内容（除了包含我所做的更改。）将Result窗口向右滚动以查看正方形。

===编辑结束===

希望它会有所帮助。

PS。 在jQuery中，使用一个函数将在整个页面已加载时初始化所有元素：

$(document).ready(function(){
    // Now, I know the page has completely loded.
    // All initialization comes here.
});

使jQuery Capty对数据的影响来自ajax请求

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-12-06 04:31:20

使jQuery Capty对数据的影响来自ajax请求

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-12-06 04:31:20

解决方案1
1 已采纳 2013-12-06 04:31:20