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
– Barmar, Commented Oct 14, 2021 at 4: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 — Barmar
– Barmar, Commented Oct 14, 2021 at 5: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
– Dasy, Commented Oct 14, 2021 at 5:03

Jose Lora · Accepted Answer · 2021-10-14 15:29:01Z

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>

Collectives™ on Stack Overflow

how to fix onClick button for append functions?

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related