JQuery dont work on content returned by ajax

Question

I had this problem for a while now and I just cant get my head around what I am doing wrong.(I think its something about ajax response)

Im trying to upload image to server. Ive tried my luck with uploadifive plugin and now im trying this plugin --> https://github.com/blueimp/jQuery-File-Upload

My site contains dropdown list(contains objects) which selected option populates div with Folowing fields(object tasks) : task name, description and input field. This is ajax script I use to populate my div:

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

And this is part in getUzdevumi.php file where I get information about each task and input field for each task :

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

            }

This is where I use jquery plugin :

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

Problem : absolutely nothing happens when i chose file in those input fields. If I Create exact same input fields anywhere else in my page they work perfectly and upload works. Problems start with input fields that are returned by AJAX.

Been trying to figure this out for long time, cant find anything that works for me and im frustrated by now so I hope anybody can help me by telling me what I do wrong.

Answer 1

You can't assign a plugin to html that doesn't exist when the plugin is initialized. If you replace the html you need to also initialize plugin again.

A quick way would be to wrap the plugin initialization into a function so you can call that function on page load as well as when you update the 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();
  }
};