Question

我在浏览按钮上遇到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>

Answer 1

我找到了一个临时解决方案。使用此setTimeout似乎有效。

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

JQuery点击浏览时输入字段动态添加，ajax无法正常工作

1 个答案: