Show/Hide не работает, если страница не обновляется

Question

EDIT: для ясности, я отредактировал этот вопрос. EDIT 2: Я смог решить половину своей проблемы.

Ниже приведен простой сценарий для пользователей, чтобы удалить загруженные ими изображения.

В зависимости от наличия или отсутствия изображения, сохраненного в базе данных. Должен отображаться значок или значок загрузки.

Вопрос:, что при нажатии кнопки удаления изображение и кнопки переключения удаляются, но значок загрузки не отображается (если страница не обновляется).

if (image exists in database) { 

    <div class="toggle" id="toggle<?php echo $image_id ?>"></div> 
}  
else { 
    <div class="upload_icon" id="upload<?php echo $image_id ?>"></div> 
     } 

`SQL query to select image in database` 

//this DIV expands when the toggle button is clicked 

<div class="content" id="image<?php echo $image_id ?>"><img src="<?php echo 
$path ?>" /> 
    <div class="remove content"><a href="#" id="<?php echo $image_id ?>" 
    class="delete_icon">Remove!</a></div> 
</div> 

Javascript часть:

$(function(){ 
$('.delete_icon').on("click",function() 
{ 
var ID = $(this).attr("id"); 
var dataString = 'image_id='+ ID; 
$this = $(this); 
if(confirm("Are you sure you want to delete this image ?")) 
{ 
$.ajax({ 
type: "POST", 
url: "delete.php", 
data: dataString, 
cache: false, 
success: function(html){ 

$('#image'+ID).remove() 
$('#toggle'+ID).remove() 
$('#upload'+ID).show(); 
}); 
} 
return false; 
}); 
}); 

Что я здесь отсутствует?

Answer 1

this больше не является ссылкой, если вы находитесь в контексте функции success. Я сэкономил this и использовал его внутри, что должно было сделать трюк.

Также я не уверен, что find на самом деле будет работать. Основываясь на вашем примере, я не уверен, что элементы #toggle актуальны в пределах .delete_icon.

Если они не вы, возможно, захотите сделать $('#toggle'+ID), а не используя поиск. В любом случае это селектор идентификаторов, поэтому это не повлияет на производительность.

$(function(){ 
    $('.delete_icon').on("click",function() { 

    var ID = $(this).attr("id"), 
     dataString = 'image_id='+ ID, 
     $this = $(this); 

    if(confirm("Are you sure you want to remove this image ?")) { 
     $.ajax({ 
     type: "POST", 
     url: "delete.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 

      $this.closest(".content").hide(); 

      $('#toggle'+ID).hide() 

      $('#upload'+ID).show(); 

     } 
     }); 
    } 
    return false; 
    }); 
});