JQuery 在动态添加输入字段时单击浏览，而 ajax 不起作用

我在浏览按钮上遇到jQuery-click问题。这是我的代码示例。我的代码基本上动态添加一个输入字段（在 ajax 中），我希望输入字段在添加后被"单击"，但它无法正常工作。如果运行两次，它就可以工作，但始终单击的是上一个输入浏览字段，而不是当前输入浏览字段。

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