Jquery 单击即可克隆多个项目答案

【问题标题】：Jquery Clone multiple items on single clickJquery 单击即可克隆多个项目
【发布时间】：2018-04-06 03:01:38
【问题描述】：

单击一次，我的 Jquery 会多次克隆元素。代码Fiddle。

我想根据菜单列表中的数据属性克隆元素，该属性引用来自 appName_list ID 的实际代码。

我正在尝试通过单击实现单个项目（此外，我可以在多次单击中添加多个相同的项目）。

提前感谢

$(".appNameSelect").hover(
  function() {
    $(this).addClass('addNow');
    $('.addNow').on('click', function(e) {

      $("#appName_list .appName_main[data-id='" + $(this).attr("data-id") + "']").clone().appendTo("#appendTo");
      e.preventDefault();
    })
  },
  function() {
    $(this).removeClass('addNow');
  }
);

#appName_list {
  display: none;
}

#appendTo {
  padding: 20px;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="appName_list">

  <div class="appName_main" data-type="header" data-id="1">
    Header Data
  </div>
  <div class="appName_main" data-type="header" data-id="2">
    Header Data Two
  </div>

  <div class="appName_main" data-type="footer" data-id="3">
    Footer Data
  </div>
  <div class="appName_main" data-type="header" data-id="4">
    Footer Data Two
  </div>

  <div class="appName_main" data-type="offers" data-id="5">
    Offers Data
  </div>
  <div class="appName_main" data-type="offers" data-id="6">
    Offers Data Two
  </div>
</div>

<div class="Menu_list">

  <div class="appNameSelect" data-type="header" data-id="1">
    Header One
  </div>
  <div class="appNameSelect" data-type="header" data-id="2">
    Header Two
  </div>
  <div class="appNameSelect" data-type="footer" data-id="3">
    Footer One
  </div>
  <div class="appNameSelect" data-type="footer" data-id="4">
    Footer Two
  </div>
  <div class="appNameSelect" data-type="offers" data-id="5">
    Offers One
  </div>
  <div class="appNameSelect" data-type="offers" data-id="6">
    Offers Two
  </div>

</div>

<div id="appendTo">
</div>

【问题讨论】：

标签： javascript jquery html css clone

【解决方案1】：

这是因为您在每次悬停“.appNameSelect”元素时设置了一个新的 onclick 处理程序。

作为一种可能的解决方案，我可以提出以下建议

$(".appNameSelect").hover(
  function() {

    // possible protection from click handler being bound twice
    if(this.isInitialized) {
      return;
    }
    this.isInitialized = true;

    $(this).addClass('addNow');
    $('.addNow').on('click', function(e) {
      $("#appName_list .appName_main[data-id='" + $(this).attr("data-id") + "']").clone().appendTo("#appendTo");
      e.preventDefault();
    })
  },
  function() {
    $(this).removeClass('addNow');
  }
);

另一种选择是在 .on 绑定之前通过 .off 取消绑定您的处理程序，但标志解决方案 (this.isInitialized) 更便宜。

【讨论】：

我怎样才能改进我在悬停时添加的这个，因为我不想向它添加更多代码
我认为最好在 DOM 初始化后立即设置所有点击处理程序。
@VickyParab 如果您不想更改逻辑，我建议您保护点击处理程序绑定不执行两次...我更新了答案。

【解决方案2】：

off() 你的按钮在 on() 之前点击。

$(".appNameSelect").hover(
  function() {
    $(this).addClass('addNow');
    $('.addNow').off().on('click', function(e) {

      $("#appName_list .appName_main[data-id='" + $(this).attr("data-id") + "']").clone().appendTo("#appendTo");
      e.preventDefault();
    })
  },
  function() {
    $(this).removeClass('addNow');
  }
);

#appName_list {
  display: none;
}

#appendTo {
  padding: 20px;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="appName_list">

  <div class="appName_main" data-type="header" data-id="1">
    Header Data
  </div>
  <div class="appName_main" data-type="header" data-id="2">
    Header Data Two
  </div>

  <div class="appName_main" data-type="footer" data-id="3">
    Footer Data
  </div>
  <div class="appName_main" data-type="header" data-id="4">
    Footer Data Two
  </div>

  <div class="appName_main" data-type="offers" data-id="5">
    Offers Data
  </div>
  <div class="appName_main" data-type="offers" data-id="6">
    Offers Data Two
  </div>
</div>

<div class="Menu_list">

  <div class="appNameSelect" data-type="header" data-id="1">
    Header One
  </div>
  <div class="appNameSelect" data-type="header" data-id="2">
    Header Two
  </div>
  <div class="appNameSelect" data-type="footer" data-id="3">
    Footer One
  </div>
  <div class="appNameSelect" data-type="footer" data-id="4">
    Footer Two
  </div>
  <div class="appNameSelect" data-type="offers" data-id="5">
    Offers One
  </div>
  <div class="appNameSelect" data-type="offers" data-id="6">
    Offers Two
  </div>

</div>

<div id="appendTo">


</div>

【讨论】：