将 Div 类附加到超链接类 - 然后在单击时克隆并将超链接附加到容器答案

【问题标题】：Append Div Class to Hyperlink Class — then Clone & Append Hyperlink To Container on Click将 Div 类附加到超链接类 - 然后在单击时克隆并将超链接附加到容器
【发布时间】：2016-07-03 11:50:57
【问题描述】：

当您将鼠标悬停在任何超链接（具有“.link”类)。
然后，当您单击附加的 (.link-cloner) 类时，我想克隆它附加到的超链接，并将该（链接）附加到#container。

我快到了，我只是无法完成最后一部分。

代码笔： http://codepen.io/StrengthandFreedom/pen/JXEEQP/

我尝试在各种组合中使用 find()、closest() 和 $(this)，但我不能让它只克隆超链接（不是 linkCloner）并将其附加到 #container。

jQuery：

$(document).ready(function(e) {
  /* ------------------------
    Part 1 — WORKS
  --------------------------*/
  // Store link-cloner div in variable
  var linkCloner = $('<div class="link-cloner">Cloner</div>');

  // When mouse hover over any hyperlink
  $('.link').on('mouseover', function() {

    // Append the link-cloner class to the hyperlink
    $(this).append(linkCloner);
  }).mouseleave(function() {

    //on mouse leave, remove link-cloner 
    $(linkCloner).remove();
  });
/* ------------------------
    Part 2 — DOESN'T WORK
  --------------------------*/
  //Then when you click on the appended linkCloner, 
  clone the hyperlink and append it to the #container
  $(linkCloner).on('click', function() {

  // This code is wrong.... 
  event.preventDefault();
  $('.link').clone().append('<li></li>').appendTo('#container');

  });
});

有人可以引导我走向正确的方向吗？ JavaScript 或 jQuery，我都可以（我都在学习）:-)

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你只是犯了一个小错误。用以下代码替换您的第 2 部分：

$('.link').on('click', function(event) {

  // This code is wrong.... 
  event.preventDefault();
  $(this).clone().append('<li></li>').appendTo('#container');

});

【讨论】：

谢谢，但有一个问题，克隆按钮 (".link-cloner") 也被克隆到 #container... 我只想要 a href (".link")克隆并附加到#container .. 是否有某种方法可以在超链接附加到#container 后立即分离或删除克隆按钮？ :-) 添加了您的代码的新 codepen：codepen.io/StrengthandFreedom/pen/oxBWGq
我想我自己解决了这个问题，我刚刚添加了另一个 $(linkCloner).remove();代码的第 2 部分 codepen.io/StrengthandFreedom/pen/MyJmQj 似乎有效，但不确定这是否是一个好方法？

【解决方案2】：

尝试使用

$().drag();

对于链接到 div 的克隆检查 jquery 文档

希望帮助

【讨论】：