jQuery-Klick-Ereignis wird ausgelöst, bevor Sie geklickt haben

Question

Ich habe eine kleine Todo-App erstellt und dabei ein Problem festgestellt, das so aussieht, als würde die Warnmeldung vor dem Klick-Ereignis ausgelöst. Es sieht nicht so aus, als wäre das Ereignis überhaupt registriert. Kann mir jemand sagen, warum das passiert?

(function() { 
    'use strict'; 
    var MyTodo = { 
     init: function() { 
      this.cacheDom(); 
      this.bindEvent(); 
      this.addTask(); 

     }, 
     cacheDom: function() { 
      this.$title = $('#inpTitle'); 
      this.$date = $('#inpDate'); 
      this.$description = $('#inpDescription'); 
      this.$addTaskBtn = $('#addTaskBtn'); 
      this.$pending = $('#pending'); 
     }, 
     addTask: function() { 
      if (!this.$title.val()) { 
       alert('please enter title'); 
       return; 
      } 
      var value = '<ul class="todo-task" id="todoList" draggable="true"><li><strong>' + this.$title.val() + '</strong></li>' + 
       '<li>' + this.$date.val() + '</li>' + 
       '<li>' + this.$description.val() + '</li></ul>'; 

      this.$pending.append(value); 

      // empty inputs 
      this.$title.val(''); 
      this.$date.val(''); 
      this.$description.val(''); 
     }, 
     bindEvent: function() { 
      this.$addTaskBtn.on('click', this.addTask.bind(this)); 

     } 

    }; 

    MyTodo.init(); 
})(); 

Answer 1

Wie Sie this.addTask(); in init sich berufen, init Methode erhalten aufgerufen und daher wird es alert(). Entfernen this.addTask Aufruf von init()

(function() { 
 
    'use strict'; 
 
    var MyTodo = { 
 
    init: function() { 
 
     this.cacheDom(); 
 
     this.bindEvent(); 
 

 
    }, 
 
    cacheDom: function() { 
 
     this.$title = $('#inpTitle'); 
 
     this.$date = $('#inpDate'); 
 
     this.$description = $('#inpDescription'); 
 
     this.$addTaskBtn = $('#addTaskBtn'); 
 
     this.$pending = $('#pending'); 
 
    }, 
 
    addTask: function() { 
 
     if (!this.$title.val()) { 
 
     alert('please enter title'); 
 
     return; 
 
     } 
 
     var value = '<ul class="todo-task" id="todoList" draggable="true"><li><strong>' + this.$title.val() + '</strong></li>' + 
 
     '<li>' + this.$date.val() + '</li>' + 
 
     '<li>' + this.$description.val() + '</li></ul>'; 
 

 
     this.$pending.append(value); 
 

 
     // empty inputs 
 
     this.$title.val(''); 
 
     this.$date.val(''); 
 
     this.$description.val(''); 
 
    }, 
 
    bindEvent: function() { 
 
     this.$addTaskBtn.on('click', this.addTask.bind(this)); 
 

 
    } 
 

 
    }; 
 

 
    MyTodo.init(); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="todoWrapper" class="container"> 
 
    <div class="todo" id="pending" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
    <h3 class="text-center">Pending</h3> 
 

 

 
    </div> 
 
    <div class="todo" id="inProgress" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
    <h3 class="text-center">In Progress</h3> 
 
    </div> 
 
    <div class="todo" id="completed" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
    <h3 class="text-center">Completed</h3> 
 
    </div> 
 
    <div id="addTask" class="todo"> 
 
    <h2 class="text-center">Add Task</h2> 
 

 
    <div> 
 
     <input type="text" name="" id="inpTitle" placeholder="title"> 
 
    </div> 
 
    <div> 
 
     <textarea name="" id="inpDescription" cols="23" rows="3" placeholder="description"></textarea> 
 
    </div> 
 
    <div> 
 
     <input type="date" name="" id="inpDate" placeholder="due date"> 
 
    </div> 
 
    <div> 
 
     <button id="addTaskBtn" class="btn btn-primary">Add Task</button> 
 
     <button id="clearTaskBtn" class="btn btn-primary">Clear Task</button> 
 
    </div> 
 

 

 

 
    <div class="delete" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
    <audio id="sfx" src="media/dump.wav"></audio> 
 
    </div> 
 
</div>