CODEWITHSUNDEEP
javascript
Lukáš Ježek
Lukáš Ježek

Reputation: 75

Adding event listener via function to cloned object

I am trying to clone div and add eventlistener to that particular object. The problem is that the eventlistener applies to all previous objects so I guess it's probably not possible to do it via clone. Please see the example below - when I add e.g. 3 divs and change any option within any of them, it alerts 3 times instead of just once. Simply said, I want to dynamically add event listener to cloned object without affecting the previous ones.

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

Upvotes: 0

Views: 150

Answers (1)

mplungjan
mplungjan

Reputation: 177975

  1. Use jQuery since you have it.
  2. Use clone(true) - no longer needed in my solution though now I
  3. Delegate - and have class instead of ID on the select

$("#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>

Upvotes: 1

Related Questions