Javascript AJAX使用GET方法加载php文件，加载时未显示某些jquery插件

你好，我是学习AJAX和JQuery的初学者，也许这是一个愚蠢的问题，但请不要评判我。 我创建实时显示数据，数据加载时不刷新页面，因此我使用AJAX，我加载函数onload in body标记

我使用图像选择器，不使用AJAX GET时看起来不错

我的文件index.html是主文件，我还添加了getdata.php来显示文件

关于index.html

<div class="col-xs-8 picker" id="viewdata">
     // content getdata.php here                
</div>

关于getdata.php

<select class="image-picker">
        <?php
            include "config.php";
            $res = $conn->query("select * from images");
            while ($row = $res->fetch_assoc()) {
            ?>
        <option data-img-src="images/<?php echo $row['file_name'];?>" value="<?php echo $row['file_name'];?>"> <?php echo $row['file_name'];?> </option>
        <?php } ?>
    </select>

但结果是这样的

就像图像选择器没有加载一样

---

很抱歉，我的英语不好。

您需要在ajax请求后重新初始化插件

$.ajax({
    type: "GET",
    url: "php/getdata.php",
    dataType: "html"
}).done(function( data ) {
    $('#viewdata').html(data);
    $("select").imagepicker(); //reinitialize here
});

---

请记住，大多数jquery插件不会对动态生成的html应用其效果。

您的脚本应如下所示：

function viewdata(){
    $.ajax({
        type: "GET",
        url: "php/getdata.php",
        dataType: "html",
        success: function(data){
            $('#viewdata').html(data);
            $('select').imagepicker(); // to reinitialize the plugin.
        }
        error: function(data){
            // error handling
        }
    }).done(function(data){
        // something to do after, even if it throws an error.
    });
}

function viewdata(){
    $.ajax({
        type: "GET",
        url: "php/getdata.php",
        dataType: "html",
        success: function(data){
            $('#viewdata').html(data);
            $('select').imagepicker(); // to reinitialize the plugin.
        }
        error: function(data){
            // error handling
        }
    }).done(function(data){
        // something to do after, even if it throws an error.
    });
}