AJAX使用GET方法加載php文件並在加載時但是沒有出現一些jquery插件

Question

你好我開始學習AJAX和JQuery，也許這是一個愚蠢的問題，但請不要評判我。 我創建實時顯示數據，加載數據而不刷新頁面，所以我使用AJAX，我在body標簽中加載函數onload。

我使用圖像選擇器，不使用AJAX GET時效果很好，

並分隔我的文件index.html是主文件，我還添加了getdata.php文件show。

在index.html上

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

在script.js上

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

在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>

但結果變成了這樣

這就像沒有加載的圖像選擇器

對不起我的英語不好。

Answer 1

你需要在ajax請求后重新初始化插件。

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

請記住，大多數jquery插件不會對動態生成的html應用其效果。

Answer 2

您的腳本應該是以下內容：

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.
    });
}