将参数传递给绑定函数

Question

I am running into an issue where I want to pass an 'event' parameter to a function which is being called from a JQuery eventListener.

$('#todoRemove').on('click', this.removeTask(event));

This immediately calls the function when the page is loaded, then does not work when pressing the button which would kick off the event. What can I change to make it so it calls the method in the prototype but passes the event parameter?

    TaskCtrlr.prototype = {
    init: function () {
        this.setupEventHandlers();
    },
    setupEventHandlers: function () {
        $('#addTask').on('click', this.addTask.bind(this));
        $('#todoRemove').on('click', this.removeTask.bind(this));
/*      $('#todoComplete').on('click', this.completeTask.bind(this));
        $('#doneRemove').on('click', this.removeTask.bind(this));*/
    },
    addTask: function () {
        let taskInput = this.view.getTaskInput();

        let newTask;
        if (this.model.tasks.todo.length == 0) {
            newTask = new Task(0, taskInput.title, taskInput.desc, false);
        } else {
            let id = this.model.tasks.todo[this.model.tasks.todo.length - 1].id + 1;
            newTask = new Task(id, taskInput.title, taskInput.desc, false);
        }

        this.model.addTask(newTask);
        this.view.addTodoTask(newTask);
    },
    completeTask: function (event) {
        console.log('wwwwww');
        console.log(event.target.id);
    },
    removeTask: function (event) {
        console.log('eeeeee');
        console.log(event.target.id);
    }
};

EDIT: CURRENT SOLUTION

$('#todoRemove').on('click', event, removeTask);

ERROR:

jQuery.Deferred exception: removeTask is not defined ReferenceError: removeTask is not defined

Answer 1

Why do you want to pass event ? What does it even refer to?

The event object is passed by the caller of the event handler, which is jQuery. You should do exactly the same as you do for the other handlers:

$('#todoRemove').on('click', this.removeTask.bind(this));

jQuery will pass the event object to the function without you having to do anything.

Answer 2

This immediately calls the function when the page is loaded

$('#todoRemove').on('click', this.removeTask(event));

Yes, it will call it because during registering a call back, you are not really registering a callback but calling your function using this code:

this.removeTask(event)

Instead you need to do this. I am not sure what event is but the 2nd argument you can use to pass something to the callback:

$('#todoRemove').on('click', event, removeTask);

And you can define removeTask like this:

function removeTask( event ) {
  //...
}

Here is an example you can play with to get comfortable:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );   

If you do not pass anything, jQuery will still pass the a parameter to you which contains the event info as shown below:

function greet2( event ) {
  alert( "Hello " + event.target.id );
}
$( "button" ).on( "click", greet2 );

There is more info here .

<== Fiddle Me ==>