使用ajax无法动态添加输入字段时，jQuery单击浏览

Question

I am having issues having jQuery-click on the browse button. Here is a sample of my code. My code basically dynamically adds an input field (in ajax) and I want the input field to be "Clicked" on after it is added but it doesn't work properly. It works if it is ran twice but it is always the previous input browse field that is clicked on, not the current.

 $( document ).delegate( ".add_picture", "click", function() {
    //$('.add_picture').click(function(){
        //Check and see if there is a selected question
        if (isAnythingHighlighted()){
            var assessmentID = $('#assessment_name_input').attr("data-assessmentid");
            var questionID = $('.highlight').attr("data-questionid");
            var order = $(".highlight ul li").length;
            var addQuestionItem=true;
            var questionItemTypeID = 3; //3 for picture
            if (debug) 
            {
               alert(questionID);
            } 
            jQuery.ajax({
                type: "POST", // HTTP method POST or GET
                url: "create_assessment_response.php", //Where to make Ajax calls
                dataType:"text", // Data type, HTML, json etc.
                data:{
                        addQuestionItem:addQuestionItem, 
                        questionID:questionID, 
                        questionItemTypeID:questionItemTypeID, 
                        order:order, 
                        assessmentID:assessmentID
                }, //Form variables
                success:function(response){
                        response = response.trim();
                        //Code for the Picture li
                        var li = 
                                $("\<li class='pictureItem' data-questionItemUniqueID='" + response + "'>\
                                    <a class='deleteQuestionItem'>\
                                    <i class='remove_icon fa fa-remove'></i></a>\
                                    <h2>Image</h2>\
                                    <div class='wrap'>\
                                    <form action='ajaxupload.php' method='post' enctype='multipart/form-data'>\
                                    <img style='display:none' class='loader' src='loader.gif' alt='Loading....' title='Loading....' />\
                                    <input id='browse"+response+"' class='uploadImage' type='file' accept='image/*' name='image' />\
                                    <input class='imageSubmit' type='submit' value='Upload' data-questionItemUniqueID='" + response + "'>\
                                    <div class='preview' style=''></div>\
                                    </form>\
                                    </div>\
                                    </li>");
                        //Add the li to the highlighted question
                        $(".highlight ul").append(li);
                        makeSubListSortable();
                        $.getUpdatedLog();
                        //$(".highlight ul").children('li').find('input[type=file]').trigger("click"); this won't work. Auto open file browse.

                        // $(".highlight ul").children('li:first').find('input[type=file]').click();

                   },
                   error:function (xhr, ajaxOptions, thrownError){
                         alert(thrownError);
                   }
        });
        //end ajax 
}


$(".highlight ul").children('li.pictureItem:last').find("input[type=file]").trigger("click");
});
//example appended Li code: <li class="pictureItem" data-questionitemuniqueid="7515">            <a class="deleteQuestionItem">            <i class="remove_icon fa fa-remove"></i>            </a>            <h2>Image</h2>            <div class="wrap">            <form action="ajaxupload.php" method="post" enctype="multipart/form-data">            <img style="display:none" class="loader" src="loader.gif" alt="Loading...." title="Loading....">            <input id="browse7515" class="uploadImage" accept="image/*" name="image" type="file">            <input class="imageSubmit" value="Upload" data-questionitemuniqueid="7515" type="submit">            <div class="preview" style=""></div>            </form>            </div>            </li>

Answer 1

I found a temporary solution. Using this setTimeout seems to work.

           setTimeout(function(){
  $(".highlight ul").children('li.pictureItem:last').find("input[type=file]").trigger("click");
}, 300);