Question

如何从ajax请求中对数据加载产生capty效应？我在主页面有一些潜水，并从ajax加载更多请求，capty工作正常主数据但不能处理从ajax请求加载的数据，我尝试在ajax结果中添加capty函数，但旧的div显示黑屏。 / p>

如何使用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”，然后才会在其中搜索“详细信息”类find()

===编辑开始===

更改后的代码将起作用，但ajax返回的数据必须包含唯一的ID，而ajax / more.html是您在主体中的副本。请考虑更改ID。当我自己改变它时它起作用：细节2 信息2

请参阅小提琴：http://jsfiddle.net/5K3nq/我将您的来源复制到的地方。而不是调用$.post()我调用了函数greg()，它返回你的ajax应该返回的内容（除了它包含我的更改。）向右滚动结果窗口以查看正方形。

===编辑结束===

希望它会有所帮助。

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

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

对来自ajax请求的数据进行Jquery Capty效果

1 个答案: