Question

单击一次，我的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>

Answer 1

这是因为你每次悬停＆＃34; .appNameSelect＆＃34;时都会设置一个新的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.isInitialized）更便宜。

Answer 2

off（）按钮在（）开启之前点击。

data.get(i).getRow()

$(".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;
}

Jquery单击即可克隆多个项目

2 个答案: