Javascript Jquery一次单击即可克隆多个项目

我的Jquery在一次单击中多次克隆元素。代码在

我想根据菜单列表中的数据属性克隆元素，该属性引用appName\u列表ID中的实际代码

我正试图实现单点击一个项目（此外，我可以添加多个相同的项目在多次点击）

先发制人

$（.appNameSelect”）.hover(
函数（）{
$（this.addClass（'addNow'）；
$（'.addNow'）。在（'click'，函数（e）上{
$（“#appName_list.appName_main[data id=”+$（this.attr（“data id”）+“]”]”）.clone（）.appendTo（“#appendTo”）；
e、 预防默认值（）；
})
},
函数（）{
$（this.removeClass（'addNow'）；
}
);
#appName_列表{
显示：无；
}
#附属物{
填充：20px；
背景色：#eee；
}

标题数据
标题数据二
页脚数据
页脚数据二
提供数据
提供数据二
标题一
标题二
页脚一
页脚二
提供一个
提供两个
这是因为每次悬停“.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');
  }
);

另一种选择是在
绑定之前通过
.off
解除绑定处理程序。on
绑定，但是标记解决方案（
this.i初始化的
）更便宜。
关闭（）您的按钮在打开之前单击（）


$（.appNameSelect”）.hover(
函数（）{
$（this.addClass（'addNow'）；
$（'.addNow'）.off（）.on（'click'，函数（e）{
$（“#appName_list.appName_main[data id=”+$（this.attr（“data id”）+“]”]”）.clone（）.appendTo（“#appendTo”）；
e、 预防默认值（）；
})
},
函数（）{
$（this.removeClass（'addNow'）；
}
);
#appName_列表{
显示：无；
}
#附属物{
填充：20px；
背景色：#eee；
}

标题数据
标题数据二
页脚数据
页脚数据二
提供数据
提供数据二
标题一
标题二
页脚一
页脚二
提供一个
提供两个
我在hover上添加了这一点，因为我不想在itI中添加更多的代码。我认为最好在DOM初始化后立即设置所有的单击处理程序。@VickyParab如果您不想更改逻辑，我建议您保护单击处理程序绑定，以免重复执行两次。。。我更新了答案。