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 >
  <div >
    <div>
      <a  role="button">Add cell</a>
      <a  role="button">Remove cell</a>
    </div>
    <iframe src="index.php"></iframe>
  </div>
</div>

What could I be doing wrong?

CodePudding user response：

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 >
  <div >
    <div>
      <a  role="button">Add cell</a>
      <a  role="button">Remove cell</a>
    </div>
    <iframe src="trial37.php"></iframe>
  </div>
</div>

CodePudding user response：

$(".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 >
  <div >
    <a  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.