JQuery 不適用於 ajax 返回的內容

Question

我現在遇到這個問題有一段時間了，我無法理解我做錯了什么。（我認為這與 ajax 響應有關）

我正在嘗試將圖像上傳到服務器。 我用uploadifive插件試過運氣，現在我正在嘗試這個插件--> https://github.com/blueimp/jQuery-File-Upload

我的站點包含下拉列表（包含對象），其中選定的選項會使用以下字段（對象任務）填充 div：任務名稱、描述和輸入字段。 這是我用來填充我的 div 的 ajax 腳本：

<script type="text/javascript">
function showUzdevumi(str) {
    if (str == "") {
        document.getElementById("nacDargums_uzdevumi").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("nacDargums_uzdevumi").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","getUzdevumi.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>

這是 getUzdevumi.php 文件的一部分，我在其中獲取有關每個任務的信息和每個任務的輸入字段：

while($row = mysqli_fetch_assoc($result))
            {
    ?>          <!--//${"id_uzdevums_".$i} = $row["id_uzdevums"];   !-->


                <div class='nacDargums_popup_uzd' id='<?php echo "nacDargums_popup_uzd_".$i."" ?>'>
                <p class='nacDargums_popup_uzd_title'><?php echo "".$i.". ".$row['uzd_nosaukums']." : "?></p>
                <div class='nacDargums_popup_uzd_desc'><?php "".$row['uzd_apraksts'].""?></div></div>
                <div id='<?php echo "uzd_id_hidden_".$i.""?>' style='display: none;'><?php"".$row['id_uzdevums'].""?></div>
                <!-- Upload input field !-->
                <input class="fileupload" id=<?php echo "fileupload".$i ?> type="file" name="files[]" data-url="jQuery-File-Upload-master/server/php/" multiple>


                <?php $i++; ?>

    <?php

            }

這是我使用 jquery 插件的地方：

<script>
        $(function () {
            $('.fileupload').fileupload({
                dataType: 'json',
                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                    });
                }
            }   );
        });
    </script>

問題：當我在這些輸入字段中選擇文件時，絕對沒有任何反應。 如果我在頁面中的任何其他地方創建完全相同的輸入字段，它們就會完美地工作並上傳工作。 問題始於 AJAX 返回的輸入字段。

長期以來一直試圖解決這個問題，找不到任何對我有用的東西，現在我很沮喪，所以我希望有人可以通過告訴我我做錯了什么來幫助我。

Answer 1

您不能將插件分配給初始化插件時不存在的 html。 如果替換 html，則還需要再次初始化插件。

一種快速的方法是將插件初始化包裝到一個函數中，這樣您就可以在頁面加載以及更新 html 時調用該函數

function initializeUploader() {    
  $('.fileupload').fileupload({
    dataType: 'json',
    done: function(e, data) {
      $.each(data.result.files, function(index, file) {
        $('<p/>').text(file.name).appendTo(document.body);
      });
    }
  });    
}

// page load initialization
$(function() {
  initializeUploader();
});

// ajax initialization    
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("nacDargums_uzdevumi").innerHTML = xmlhttp.responseText;
    initializeUploader();
  }
};