Question

我正在尝试克隆div并将eventlistener添加到该特定对象。问题是事件监听器适用于所有先前的对象，因此我想可能不可能通过克隆来实现。请参阅以下示例-当我添加例如3个div并更改其中的任何选项，它会发出3次警报，而不是一次。简而言之，我想在不影响先前对象的情况下将事件侦听器动态添加到克隆对象中。

document.getElementById("add_btn").onclick = function() {
  $('.lang-div:first').clone().insertAfter($('.lang-div:last'));
  //var last_lang_div = $('.lang-div:last');
  add_onchange_event();
}

function add_onchange_event() {
  this.addEventListener('change', (function(obj) {
    return function() {
      alert('should alert just once');
    }
  })(this));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lang-div">
  <select id="language">
    <option>english</option>
    <option>spanish</option>
    <option>german</option>
  </select>
</div>
<button id="add_btn">Add language</button>

https://codepen.io/azej/pen/yEvwjO

Answer 1

使用jQuery即可，因为有了它。
使用clone(true)-尽管现在我不再使用
委托-在选择项上使用类而不是ID

$("#add_btn").on("click",function() {
  $('.lang-div:first').clone(true).insertAfter($('.lang-div:last'));
});

$("#wrapper").on("change",".language",function() {
  console.log(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="lang-div">
  <select class="language">
    <option value="None">Please select</option>
    <option value="English">English</option>
    <option value="Spanish">Spanish</option>
    <option value="German">German</option>
  </select>
</div>
</div>
<button type="button" id="add_btn">Add language</button>

通过函数将事件侦听器添加到克隆对象

1 个答案: