JQuery ajax срабатывает один раз

Question

Я использую asp mvc4 и динамически создаю некоторые элементы. Каждый из элементов позволяет пользователю загружать несколько изображений, а дисплей обновляется через вызов Ajax.

Первый звонок работает, как ожидалось, но не запускается снова (в Chrome), и функция jquery, которая вызывает удаление изображения для воспроизведения вверх, также перестает работать (в Chrome и IE).

После рассмотрения нескольких сообщений на этот счет у меня нет каких-либо дальнейших one post предполагает, что I:

инструменты проверки разработчиков браузера, например, Вкладка «Сеть»/XHR в Chrome .............. Проверьте ответ первого запроса на остальную часть, и разница, и, следовательно, проблема, вероятно, выскочит на вас

Ничто, что может помочь мне с решением, выпрыгивает на меня. Несмотря на то, что-то явно не так

и при нажатии на

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 (для загрузки изображений)

$("#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 (для скольжения изображения)

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

Answer 1

По запросу в комментариях: Это связано с асинхронном: ложной. Это заставляет запрос быть синхронным, поэтому временно блокирует браузер и вызывает провал других вещей. Выполнение асинхронного вызова должно сделать трюк!