Schaltfläche wird zweimal ausgelöst, wenn geklickt wird

Question

Wenn Sie unter dem JSFiddle gehen. Fügen Sie zwei Elemente hinzu und drücken Sie "Fertig" für eines der Elemente in der Konsole, um dieselbe Schaltfläche zweimal auszubuchen. Ich kann nicht herausfinden warum.

Was mache ich hier falsch? :)

https://jsfiddle.net/7k84p3oz/6/

HTML

<input id="inputAdd" type="text" name="" value=""> 
    <button id="submitItem" type="button" name="button">Add</button> 

    <!-- Start of list --> 
    <ul id="listContent"></ul> 
    <!-- End of list --> 

    <!-- Start of completed --> 
    <div id="completed"> 
     <h4>Completed</h4> 
    </div> 
    <!-- End of completed --> 

JS

$(document).ready(function(){ 

(function() { 
    var itemTracker = { 
     // init 
     init: function() { 
      this.bindEvents(); 
     }, 

     // cacheDom 
     cacheDom: { 
      inputAdd: $('#inputAdd'), 
      submitAdd: $('#submitItem'), 
      listContent: $('#listContent'), 
      completed: $('#completed') 
     }, 

     // Add item 
     addItem: function() { 
      var itemValue = this.cacheDom.inputAdd.val(); 
      var listItem = $("<li></li>"); 
      var buttonRemove = '<button class="remove">Remove</button>'; 
      var buttonComplete = '<button class="complete">Complete</button>'; 
      listItem.append(itemValue); 
      listItem.append(buttonRemove); 
      listItem.append(buttonComplete); 
      var itemContent = this.cacheDom.listContent.append(listItem); 
      this.cacheDom.inputAdd.val(""); 

      // Remove item 
      var remove = $('.remove'); 
      remove.on("click", function(e){ 
       $(e.target).closest("li").hide(); 
      }); 

      var complete = $(".complete"); 

      // Complete item 
      var completedItem = function(e) { 
       console.log(this); 

       // var childParent = $(this).parent(); 
       // var rootParent = childParent.parent(); 
       // var parentId = rootParent.prop('id'); 
       // 
       // if(parentId === "listContent") { 
       //  $('#completed').append(listItem); 
       // } else { 
       //  $('#listContent').append(listItem); 
       // } 
      }; 
      complete.on("click", completedItem); 
     }, 

     // Bind Events 
     bindEvents: function() { 
      this.cacheDom.submitAdd.on("click", this.addItem.bind(this)); 
     } 
    }; 

    itemTracker.init(); 

})(); 

}); 

Answer 1

ist, weil jedes Mal, wenn Sie ein neues Element hinzuzufügen, Sie ALL die Knöpfe mit Klasse bekommen Das Gesamt var complete = $(".complete"); und Anhängen einer Aktion zu ihnen.

Daher, wenn Sie 1 Schaltfläche hinzufügen: Es wird nur einmal ausgelöst. Wenn Sie 2 Tasten hinzufügen: Die erste wird zweimal ausgelöst, die zweite einmal. Wenn Sie 3 Taste hinzufügen: die erste wird dreimal, die zweite zweimal und die dritte einmal auslösen. etc ...

Sie können das Problem beheben, indem ersetzt: var complete = $(".complete"); Für: var complete = $(listItem).find(".complete") Zeile 36.

Dadurch wird sichergestellt, dass sie wählt nur die Taste Das Gesamt im listItem, die Sie zu, dass die Schaffung sind Moment.

Answer 2

Der Grund, warum Sie den Klassennamen binden, wird Ereignis klicken; Dies bedeutet, dass der Event-Handler für eine Anzahl von HTML-Elementen ausgelöst wird, die den Klassennamen complete enthält.

Da Sie e Parameter in Ihrer Event-Handler-Funktion haben, versuchen Sie, das e.target zu verwenden, das das angeklickte Element geben wird. Diese

var completedItem = function(e) { 
    console.log(e.target); 
} 

Answer 3

In Ihrem Code verwendeten Sie var complete = $(".complete"); , um den vollständigen Button zu finden. Wenn Sie den zweiten Eintrag hinzufügen, gibt $(".complete"); daher 2 Elemente zurück, und das Ereignis wird auch an den früheren Knoten angehängt. Was Sie

var buttonComplete = $('<button class="complete">Complete</button>') 

und verwenden diese buttonComplete die komplette Taste in jquery wie Sie wickeln können, klicken Ereignis zuordnen.

buttonComplete.on("click", completedItem); 

$(document).ready(function(){ 
 

 
(function() { 
 
    var itemTracker = { 
 
     // init 
 
     init: function() { 
 
      this.bindEvents(); 
 
     }, 
 

 
     // cacheDom 
 
     cacheDom: { 
 
      inputAdd: $('#inputAdd'), 
 
      submitAdd: $('#submitItem'), 
 
      listContent: $('#listContent'), 
 
      completed: $('#completed') 
 
     }, 
 

 
     // Add item 
 
     addItem: function() { 
 
     \t \t var index=this.cacheDom.listContent.children().length; 
 
      var itemValue = this.cacheDom.inputAdd.val(); 
 
      var listItem = $("<li></li>"); 
 
      var buttonRemove = '<button class="remove">Remove</button>'; 
 
      var buttonComplete = $('<button class="complete">Complete</button>') 
 
      listItem.append(itemValue); 
 
      listItem.append(buttonRemove); 
 
      listItem.append(buttonComplete); 
 
      var itemContent = this.cacheDom.listContent.append(listItem); 
 
      this.cacheDom.inputAdd.val(""); 
 

 
      // Remove item 
 
      var remove = $('.remove'); 
 
      remove.on("click", function(e){ 
 
       $(e.target).closest("li").hide(); 
 
      }); 
 

 
      var complete = $(".complete"); 
 

 
      // Complete item 
 
      var completedItem = function(e) { 
 
       console.log(this); 
 

 
       // var childParent = $(this).parent(); 
 
       // var rootParent = childParent.parent(); 
 
       // var parentId = rootParent.prop('id'); 
 
       // 
 
       // if(parentId === "listContent") { 
 
       //  $('#completed').append(listItem); 
 
       // } else { 
 
       //  $('#listContent').append(listItem); 
 
       // } 
 
      }; 
 
      buttonComplete.on("click", completedItem); 
 
     }, 
 

 
     // Bind Events 
 
     bindEvents: function() { 
 
      this.cacheDom.submitAdd.on("click", this.addItem.bind(this)); 
 
     } 
 
    }; 
 

 
    itemTracker.init(); 
 

 
})(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <input id="inputAdd" type="text" name="" value=""> 
 
     <button id="submitItem" type="button" name="button">Add</button> 
 

 
     <!-- Start of list --> 
 
     <ul id="listContent"></ul> 
 
     <!-- End of list --> 
 

 
     <!-- Start of completed --> 
 
     <div id="completed"> 
 
      <h4>Completed</h4> 
 
     </div> 
 
     <!-- End of completed -->