how to fix onClick button for append functions?

Question

Here I work on a project where I want to implement open and close buttons but I am not able to do

currently, it's a close button for both, I need to add separate open and close buttons so that when the user clicks on open then it's open and when someones click on close then it should close properly also when I click continuously close then buttons freezes for sometime

Here is the demo of my JSFiddle Demo

please check the js Fiddle demo where buttons doesn't work properly

Here is the code

function createItem(item) {
  var elemId = item.data("id");
  var clonedItem = item.clone();
  var newItem = $(`<div data-id="${elemId}"></div>`);
  newItem.append(clonedItem);
  newItem.appendTo('.item-append');
}

function countSaveItems() {
  $('.count').html($(".item-append div.item-save[data-id]").length);
}
$('.item-all .item-save').click(function() {
  $(this).toggleClass('productad')
  window.localStorage.setItem('test_' + this.dataset.id, $(this).hasClass('productad'));
});
$('.item-all .item-save').each(function() {
  var id = 'test_' + $(this).data("id");
  $(this).append(`<button class='close'>Close</button>`);
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    createItem($(this));
    countSaveItems();
  }
});
$(".item-all .item-save").click(function() {
  var elemId = $(this).data("id");
  var existing = $(`.item-append div[data-id="${elemId}"]`);
  if (existing.length > 0) {
    existing.remove();
  } else {
    createItem($(this));
  }
  countSaveItems();
});
$(".item-append").on("click", ".close", function() {
  var id = $(this).parent().data("id");
  localStorage.removeItem(`test_${id}`);
  $(`.item-save[data-id='${id}']`).removeClass('productad');
  $(this).parent().remove();
  countSaveItems();
});

.item-save {
  position: relative;
  display: block;
  font-size: 14px;
  margin: 5px;
  padding: 5px;
  background: #a5a5a5;
  float: left;
  text-align: center;
  cursor: pointer;
}

.productad {
  background: red;
  color: #eee
}

.count {
  display: block;
  background: #cbcbcb;
  float: left;
  font-size: 15px;
  padding: 5px 18px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='item-all'>
  <div class='item-save' data-id='123'>
    Save1
  </div>
  <div class='item-save' data-id='124'>
    Save2
  </div>
  <div class='item-save' data-id='125'>
    Save3
  </div>
  <div class='item-save' data-id='126'>
    save4
  </div>
</div>
<div class='item-append'>
</div>
<div class='count'>0</div>

Any Kind of help or suggestion is highly appreciated

You have two `$(".item-all .item-save").click()` calls. The first handler only runs for the buttons that are in the original HTML. Both handlers run for the original buttons and the buttons that were added by the `.each()` loop. — Barmar, Oct 14 '21 at 04:58
I don't really understand what you're trying to do. But if you're going to add and remove elements dynamically, you should probably read [Event binding on dynamically-created elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Oct 14 '21 at 05:01
Sorry but this is not a relevant solution can you provide a jsFiddle demo of how to fix this little issue, I hope I get some answer or solution from your side — Dasy, Oct 14 '21 at 05:03

Jose Lora · Accepted Answer · 2021-10-14T15:29:01.983

To do the effect you need to add the open button into the HTML because that will be static, then switch between "Open" and "Close" when the user clicks into the "Open" or close the item, also needs to fix the local storage instead of removing in the close button just switch the value to false and validate based on that value. check the following code to see if that is what you are looking for:

function createItem(item){
    var elemId = item.data("id");
    var clonedItem = item.clone();
    var newItem = $(`<div data-id="${elemId}"></div>`);
    newItem.append(clonedItem);
    clonedItem.children('.open').remove();
    clonedItem.append(`<button class='close'>Close</button>`);
    newItem.appendTo('.item-append');
}

function countSaveItems(){
    $('.count').html($(".item-append div.item-save[data-id]").length);
}

$('.item-all .item-save').click(function() {
  var id = $(this).data("id");
  var lsId = `test_${id}`;
  
  $(this).toggleClass('productad');
  
  if (!$(this).hasClass('productad')){
    window.localStorage.setItem(lsId, false);
    $(this).children(".open").html("Open");
    createItem($(this));
  }else{
    window.localStorage.setItem(lsId, true);
    $(this).children(".open").html("Close");
    $(`.item-append div[data-id='${id}']`).remove();
  }
  countSaveItems();
  
});

$('.item-all .item-save').each(function() {
  var id = 'test_' + $(this).data("id");
  
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    createItem($(this));
  }
  countSaveItems();
});

$(".item-all .item-save").click(function() {
  var elemId = $(this).data("id");
  var existing = $(`.item-append div[data-id="${elemId}"]`);
  if (existing.length > 0){
    existing.remove();
  }else{
    
    createItem($(this));
  }
  countSaveItems();
});

$(".item-append").on("click", ".close", function() {
    var id = $(this).parent().data("id");
    window.localStorage.setItem(`test_${id}`, false);
    $(`.item-save[data-id='${id}']`).removeClass('productad');
    $(`.item-save[data-id='${id}']`).children(".open").html("Open");
    $(this).parent().parent().remove();
  countSaveItems();
});

.item-save {
  position: relative;
  display: block;
  font-size: 14px;
  margin: 5px;
  padding: 5px;
  background: #a5a5a5;
  float: left;
  text-align: center;
  cursor: pointer;
}

.productad {
  background: red;
  color: #eee
}

.count {
  display: block;
  background: #cbcbcb;
  float: left;
  font-size: 15px;
  padding: 5px 18px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='item-all'>
    <div class='item-save' data-id='123'>
        Save1 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='124'>
        Save2 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='125'>
        Save3 <button class='open'>Open</button>
    </div>
    <div class='item-save' data-id='126'>
        Save4 <button class='open'>Open</button>
    </div>
</div>
<div class='item-append'></div>
<div class='count'>0</div>

Thanks dude ! Its Working ❤️ – Dasy Oct 14 '21 at 15:05 — Dasy, Oct 14 '21 at 15:05

how to fix onClick button for append functions?

1 Answers1