php - 无法删除动态添加的 div(由旧 div 触发的事件)

Question

我试图在ajax成功操作完成后删除某个div。一些代码:

这里我尝试从 DOM 中删除它:

$('#close-modal').on('click', function () {

    console.log("modal closed");
    $( "#animation" ).remove();

});

所有这些代码都在 $(document).ready{......} 函数内

问题是，当发送表单时，会出现一个动画，但我无法在模式关闭时将其删除。我一直在调查，每个人都说这是因为该事件需要由 .on 触发，但那是为了防止我需要通过按下该元素来删除它!在这种情况下，我需要通过执行另一个操作(关闭模式)来删除它。

var url = "formulario.php"; // El script a dónde se realizará la petición.
$.ajax(
{
    type: "POST",

    url: url,

    data: $("#formulario").serialize(), // Adjuntar los campos del formulario enviado.

    success: function(data)
    {                       
      $("#formulario_contacto").hide();

      $('.modal-content').append("<div id = "animation" class='icon icon--order-success svg'><svg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' class = 'posicion'><g fill='none' stroke='#8EC343' stroke-width='2'><circle cx='36' cy='36' r='35' style='stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;'></circle><path d='M17.417,37.778l9.93,9.909l25.444-25.393' style='stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;'></path></g></svg></div>");              
    }
});

event.preventDefault();

希望你能帮助我。来自阿根廷的问候!

Answer 1

您附加的 div 中存在错误。您的错误在于删除了此处附加的 div:

 $('.modal-content').append("<div id = "animation" class='icon icon--order-success svg'><svg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' class = 'posicion'><g fill='none' stroke='#8EC343' stroke-width='2'><circle cx='36' cy='36' r='35' style='stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;'></circle><path d='M17.417,37.778l9.93,9.909l25.444-25.393' style='stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;'></path></g></svg></div>"); 

正如您在发布时可能会发现的那样...当您尝试在此处将 id 命名为“动画”时，您会关闭附加的双引号。然后它不会生成具有该名称的 div，因为这是“超出”附加的。您需要双引号来完成附加...如果您检查您的元素，您将看到是否没有这样的名称。

正确:

 $('.modal-content').append("<div id ='animation' class='icon icon--order-success svg'><svg xmlns='http://www.w3.org/2000/svg' width='72px' height='72px' class = 'posicion'><g fill='none' stroke='#8EC343' stroke-width='2'><circle cx='36' cy='36' r='35' style='stroke-dasharray:240px, 240px; stroke-dashoffset: 480px;'></circle><path d='M17.417,37.778l9.93,9.909l25.444-25.393' style='stroke-dasharray:50px, 50px; stroke-dashoffset: 0px;'></path></g></svg></div>"); 

我单独引用给你了。

然后通过您的点击函数调用它

$('#close-modal').on('click', function () {
    $( "#animation" ).remove(); 
});

检查现在是否有效。