jQuery Ajax触发一次

Question

I am using asp mvc4 and dynamically creating some elements. Each of the elements allow a user to upload a number of images and the display is updated via an Ajax call.

The first call works as expected but does not to fire again (in Chrome) and the jquery function that causes a delete image to slide up onHover also stops working (in Chrome and IE).

After reviewing several posts on this I have not got any further one post suggests that I:

check browser developer tools e.g. Network tab / XHR in Chrome..............Check the response of the first request vs the rest, and the difference and hence the problem will probably jump out at you

Nothing that can help me with a solution is jumping out at me. Although there is something obviously wrong

and when clicked on

TakeOn.cshtml

<div class="panel-group" id="accordion">
    @{ Html.RenderPartial("_Rooms", Model); }
</div>

_Rooms.cshtml

@for (int i = 0; i < Model.Rooms.Count; i++)
{
<div class="panel panel-default room">
    <div class="panel-collapse collapse in" style="height: auto;">
        <div class="panel-body">
            <row class="col-lg-6">
                <div class="imgUploader">
                    <div>
                        <div style="height: auto; width: auto; position: relative;">
                            @foreach (var file in files)
                            {
                                string name = file.Substring(file.LastIndexOf("App_Uploads"));
                                name = @"~\" + name;
                                <div class="slide">
                                    <img class="pic panel" src="@Url.Content(name)" width="50" height="50" />
                                    <div class="snipit">
                                        <img class="hoverpic panel" src="http://findicons.com/files/icons/99/office/128/delete.png" width="40" height="40" />
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                <input class="imgInput" type="file" name="FileUpload" multiple accept="image/jpeg" />
                @Html.HiddenFor(m => m.Rooms[i].RoomID)
            </row>
        </div>
    </div>
</div>
}

js (for image upload)

$("#accordion").on("change", ".imgInput", function (e) {
    var roomID = $(this).siblings("input:hidden").val();
    $("#roomIdentifier").val(roomID);
    var formData = new FormData(jQuery('#takeOn').get(0)) // store form data to pass on to the controller
    $.ajax({
        type: "POST",
        url: "/Property/_Image",
        contentType: false,
        data: formData,
        dataType: 'html',
        encode: true,
        async: false,
        processData: false,
        cache: false,
        success: function (data) {
            $("#accordion").html(data);
        },
        error: function (request, status, error) {
            alert("Error: " + error)
        }
    });

    //clear input value
    var input = $(this);
    input.replaceWith(input.val('').clone(true));
    //clear identifier
    $("#roomIdentifier").val('');
});

js(for sliding image)

$(".slide").hover(function () {
    $(this).find("div.snipit").slideDown("slow");
}, function () {
    $(this).find("div.snipit").slideUp("slow");
});

Answer 1

As per request in the comments: It has to do with async: false. That is forcing the request to be synchronous, therefore locking up the browser temporarally and causing other things to fail. Making the call asynchronous should do the trick!