jQuery event triggered multiple times

user_14773854 0
Viewed 60

I have cloned divs containing buttons that clone their parents. Upon trying to click the buttons, events are triggered 2n times such that clicking the second clone produces 4 other clones and so on:

$(".add").off("click").on("click", function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();
  $(".cloneable").clone(true).appendTo(".container");
});

$(".rem").off("click").on("click", function() {
  if (document.getElementsByClassName('container')[0].childElementCount > 1) {
    $(".cloneable:last").remove();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <div>
      <a class="btn btn-primary add" role="button">Add cell</a>
      <a class="btn btn-primary rem" role="button">Remove cell</a>
    </div>
    <iframe src="index.php"></iframe>
  </div>
</div>
What could I be doing wrong?

dom-events html jquery javascript
2 Answers

A few things.

  1. It's easier to use a deferred click handler.
  2. You were cloning all 'cloneable', not just the first. jQuery will find all cloneable and clone them, not just your original.
  3. Remove now removes the one you clicked on, not the last one.
  4. The disabled class will be added/removed to the rem button, depending on if there is only one left or not.

$(".container").on("click", ".add", function(e) 
{
  e.stopPropagation();
  e.stopImmediatePropagation();
  $(".container .rem").removeClass("disabled");
  
  let $cloneable = $(".cloneable").first().clone(true);
  $cloneable.appendTo(".container");
  
}).on("click", ".rem", function() 
{
  if($(this).hasClass("disabled") ) return;
  
  $(this).closest(".cloneable").remove();
  
  if($(".container .rem").length === 1)
    $(".container .rem").addClass("disabled");  
});
.btn.btn-primary
{
  background:#d5d5d5;padding:4px;cursor:pointer;
}

.btn.btn-primary.disabled
{
  background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <div>
      <a class="btn btn-primary add" role="button">Add cell</a>
      <a class="btn btn-primary disabled rem" role="button">Remove cell</a>
    </div>
    <iframe src="trial37.php"></iframe>
  </div>
</div>

user_9331980 

$(".add").on("click", function(e) {  $(this).parent(".cloneable").clone(true).appendTo(".container");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <a class="btn btn-primary add" role="button">Add cell</a>
    <div>CONTENT</div>
  </div>
</div>

So, what's happening in your method is that you are doing a new query each time you click and it returns all the .clonable elements and then clones them. What you want is to only find the one relevant to the item you clicked on, so you want to start with $(this) which is the item clicked and then you can use the parent() method to go up the DOM tree looking for the selector.

In these sorts of situations, it can help to put a debugger; inside your click event and then execute the method one at a time. Like $('.clonable'). You can then see maybe that it gets larger every time and that they point to all the existing elements.

user_108131060
Related