Question

嘿伙计们，我试图重新附加一个元素，当它从DOM中分离出来但是我似乎无法找到一个简单的解决方案。

$(document).on('click', '#emailEnquiryPreferred', function () {
  $('.form-group-timepicker').fadeOut(300, function(){ $(this).detach(); });
});

正如您在下面的代码中看到的那样，我正在分离它，但是在另一个点击事件中我想将其重新连接到相同的位置，如何做到这一点？

由于

Answer 1

在附加之前将其保持为变量：

var $detachedElement;
$(document).on('click', '#emailEnquiryPreferred', function () {
  $('.form-group-timepicker').fadeOut(300, function(){
    $detachedElement = $(this); 
    $(this).detach(); 
  });
});

现在，当您需要重新附加它时，请使用$detachedElement变量...

以下是完整的示例：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
        var $detachedElement;

        $(document).ready(function() {
            $('#id2').on('click', function() {
                $('#div').append($detachedElement);
            })

            $("p#id1").click(function() {
                $detachedElement = $(this).detach();
            });
        });
    </script>
</head>

<body>

    <div id="div" style="border: red solid 1px">
        <p id="id1">Detach Me!</p>
    </div>

    <p id="id2">Re-attach it!</p>

</body>

</html>

Answer 2

您可以存储已分离的元素：

 var p = $(this).detach();

您需要将此元素存储在某处（例如在某个对象中）：

 var detachedObj = null;
 $(document).on('click', '#emailEnquiryPreferred', function () {
   $('.form-group-timepicker').fadeOut(300, function(){ 
   if(detachedObj == null)
         detachedObj = $(this).detach(); 
   else 
   {
         $(this).attach(detachedObj);
         detachedObj = null;
   }

   });
});

您可以在.detach（）的jQuery API文档中看到类似的示例（阅读示例部分）：jQuery .detach()

如何使用jQuery重新附加元素？

2 个答案: