php - Nivo Slider 不会从 PHP 文件加载 Ajax 响应

Question

我正在尝试使用 PHP 将图像导入 HTML，但 NivoSlider 没有加载它。我寻找问题的原因。我正在打印一条响应和正确的警报消息。

这是 HTML 和 AJAX 查询：

<div id="workcontent" class="pcontent" style="display:none;">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">

            </div>
        </div>
        <script>
            $(document).ready(function() {
                var wl = $('#worklist div');
                wl.on('click', function(){
                    var name = $(this).attr('id');
                    console.log(name);
                    $.ajax({
                        url: 'read.php',
                        type: 'POST',
                        data: { data : name }
                    }).done(function (response) {
                        $('#slider').prepend(response);
                        alert(response);
                    });

                });
            });
        </script>
        <div id="back"></div>
    <div id="backcontainer">
        <div id="back">
            <a href="index.php">Back</a>
        </div>
    </div><!--End backcontainer-->
</div><!--End content-->

这是另一个 jQuery：

<script>
    $(document).ready(function() {
        $('#slider').nivoSlider(function(){alert('OK');});
    });
</script>

不显示此警报！):

最后，这是PHP代码：

<?php
if (isset($_POST["data"])){
    if ($_POST["data"] == "") {
            echo "data ures";
    } else {
        $data = $_POST["data"];
        $fname = "content/".$data."/*.*";
        $files = glob($fname);
        for ($i=0; $i<count($files); $i++)
        {
            $num = $files[$i];
            echo '<img src="'.$num.'" data-thumb="'.$num.'">';
        }
    }
} else {
    echo "nem jott data";
}
?>

对不起，我的英语不好

Answer 1

NivoSlider 不将函数作为参数。

也.nivoSlider()可能在AJAX 调用返回它的响应之前调用。更好的解决方案是：

$(document).ready(function() {
    $.ajax({
        url: 'read.php',
        type: 'POST',
        data: { data : name }
    }).done(function (response) {
        $('#slider').prepend(response).nivoSlider( {} );    
    });
});

现在您可以确定#slider包含来自响应正文的图像，以便 NivoSlider 可以对它们进行操作。