0

When we click OPEN, without adding to FAV first then OPEN works fine, heals when we add a line of code html to FAV then OPEN executes as many positions as possible e.g. OPEN 3 from below, performed 3 times.

<body>
    <div class="content">
        <div class="box-right">
            <ul class="list_links" id="list_links_fav"></ul>
            <ul class="list_links" id="list_links">
              <li class="list-group-item"> <button id="open" value="pathWay_value1">open</button> <span>pathWay_value1</span> <button id="fav"> add to fav</button> </li>
              <li class="list-group-item"> <button id="open" value="pathWay_value2">open</button> <span>pathWay_value2</span> <button id="fav"> add to fav</button> </li>
              <li class="list-group-item"> <button id="open" value="pathWay_value3">open</button> <span>pathWay_value3</span> <button id="fav"> add to fav</button> </li>
              <li class="list-group-item"> <button id="open" value="pathWay_value4">open</button> <span>pathWay_value4</span> <button id="fav"> add to fav</button> </li>
              <li class="list-group-item"> <button id="open" value="pathWay_value5">open</button> <span>pathWay_value5</span> <button id="fav"> add to fav</button> </li>
            </ul>
        </div>
    </div>
</body>

$(document).ready(function(){
  $('button#fav').on('click', function () {
          console.log('Clicked #fav');
          fav_value = $(this).closest("li").html();
          console.log(fav_value);
          $('#list_links_fav').append('<li class="list-group-item">' + fav_value + '</li>');
          $(this).closest("li").remove();
          console.log("Added to fav");

              $(document).ready(function(){
              $('button#open').on('click', function () {
              console.log('Clicked #open');
              var fired_button = $(this).val();
              console.log(fired_button);
              });
              });
  });
});

$(document).ready(function(){
  $('button#open').on('click', function () {
          console.log('Clicked #open');
          var fired_button = $(this).val();
          console.log(fired_button);
  });
});
G47
  • 1
  • 2
  • You have not asked a question. – Scott Hunter May 14 '20 at 18:52
  • You are making new click event bindings every time the click of the fav button happens. That is potentially creating duplicate bindings. General practice recommends not creating bindings within other bindings – Taplar May 14 '20 at 18:53
  • Also web standards expressly states that ids should not be repeated. – Taplar May 14 '20 at 18:54
  • You're using the same id="open" and "fav" multiple times. ids have to be unique, better change this to a class, otherwise your HTML is not valid. – matthias_h May 14 '20 at 18:54
  • @matthias_h ok, but it's still not my solution, maybe some other suggestions? – G47 May 14 '20 at 19:13
  • I've added the adjusted code in this Fiddle https://jsfiddle.net/ws4rkoqc/ (changing ids to classes and removing the doubled click event handler for the open button) and I think it's working as expected, or is there any issue? – matthias_h May 14 '20 at 19:25
  • I've adjusted the code so the click events are also working for the elements that are added when clicking "Fav" in this Fiddle: https://jsfiddle.net/ws4rkoqc/1/ – matthias_h May 14 '20 at 19:34
  • @matthias_h ugh, it works! now I understand, many thanks to you! – G47 May 14 '20 at 19:38
  • Glad that I was able to help :) – matthias_h May 14 '20 at 19:48

0 Answers0