jqueryajax触发一次

jqueryajax触发一次,jquery,ajax,Jquery,Ajax,我正在使用asp mvc4并动态创建一些元素。每个元素都允许用户上传大量图像,并通过Ajax调用更新显示 第一个调用按预期工作,但不会再次启动(在Chrome中),而导致删除图像在悬停时向上滑动的jquery函数也停止工作(在Chrome和IE中) 在回顾了几篇关于这方面的帖子后,我没有得到任何进一步的建议: 检查浏览器开发工具,例如Chrome中的Network tab/XHR…………检查第一个请求与其他请求的响应,以及差异,因此问题可能会跳到您身上 没有什么能帮我找到解决办法的东西是冲着我跳

我正在使用asp mvc4并动态创建一些元素。每个元素都允许用户上传大量图像,并通过Ajax调用更新显示

第一个调用按预期工作,但不会再次启动(在Chrome中),而导致删除图像在悬停时向上滑动的jquery函数也停止工作(在Chrome和IE中)

在回顾了几篇关于这方面的帖子后,我没有得到任何进一步的建议:

检查浏览器开发工具,例如Chrome中的Network tab/XHR…………检查第一个请求与其他请求的响应,以及差异,因此问题可能会跳到您身上

没有什么能帮我找到解决办法的东西是冲着我跳出来的。虽然有明显的问题

当点击

TakeOn.cshtml

<div class="panel-group" id="accordion">
    @{ Html.RenderPartial("_Rooms", Model); }
</div>
js(用于滑动图像)


根据注释中的请求:它与async:false有关。这迫使请求同步,因此暂时锁定浏览器并导致其他操作失败。使调用异步应该可以做到这一点

这是否与由于async:false而导致浏览器锁定有关?这可能是为什么长轮询xhr被取消,并可能导致进一步的问题?在我看来,上传不需要同步,你有明确的原因吗?你是对的。我只将其设置为false,因为其他方法也设置为false(具有讽刺意味的是,我的下一个任务是在保存时减小图像大小,所以如果我先这样做的话,可能从未见过这个问题)。如果你把这个作为答案,我会接受的
@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>
}
$("#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('');
});
$(".slide").hover(function () {
    $(this).find("div.snipit").slideDown("slow");
}, function () {
    $(this).find("div.snipit").slideUp("slow");
});