Pass parameter to bound function

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

score 1 · Answer 1 · answered Oct 13 '17 at 01:30

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.

answered Oct 13 '17 at 01:30

Felix Kling

705,106
160
1,004
1,072

the event will allow me to get the specific dom element triggering this event, from there i plan on going up the parentnodes to get the element to remove it. – Coova Oct 13 '17 at 01:41
This is correct. You don't need to mention `event` when binding the handler, jQuery passes it. You just need to have the `event` parameter in the function definition, which you do. – Barmar Oct 13 '17 at 01:46
@SeanCuvanov: As I said, it's jQuery that passes the event object to your function, not you. You are not (supposed to be) calling the event handler, jQuery is. You are telling jQuery: "here take this function and call it when the event happens". – Felix Kling Oct 13 '17 at 02:29
This is what I am doing, this does not work. $('#todoRemove').on('click', event, removeTask); – Coova Oct 13 '17 at 03:17
@SeanCuvanov: yes this won’t work. It’s wrong. You should do what I’m showing in my answer. – Felix Kling Oct 13 '17 at 03:43
I was doing that, but how do I get the event than? – Coova Oct 13 '17 at 16:14
@SeanCuvanov : it’s automatically passed as first argument to the function. All you have to do is access `event` in the function (since you named the first parameter `event`): `removeTask: function (event) { console.log(event); }`. If you are struggling with the concepts of event handlers, maybe read the jQuery documentation about it? https://learn.jquery.com/events/ – Felix Kling Oct 13 '17 at 16:51
I am trying to do this, modified the code to now be like your example, however... now it will not trigger the event. For example, '$('#addTask').on('click', this.addTask.bind(this));' this works, i think because the html element is on the screen always, but '$('#todoRemove').on('click', this.removeTask.bind(this));' is bound to an element that is dynamically added and it does not call the method. – Coova Oct 14 '17 at 15:15
@SeanCuvanov: How to solve this is explained in [Event binding on dynamically created elements?](https://stackoverflow.com/q/203198/218196) – Felix Kling Oct 14 '17 at 15:26

CodingYoshi · Answer 2 · 2017-10-13T01:58:38.333

0

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 ==>

edited Oct 13 '17 at 01:58

answered Oct 13 '17 at 01:32

CodingYoshi

21,881
3
45
51

hmm, thanks for the quick response. The solution '$('#todoRemove').on('click', event, removeTask);' doesn't seem to work for me. It is basically saying that the 'removeTask' function does not exist. ````````` jQuery.Deferred exception: removeTask is not defined ReferenceError: removeTask is not defined – Coova Oct 13 '17 at 01:40
@SeanCuvanov You have to define the function like I did in my answer. Otherwise you will get the error. Play with the example I put there so you can see how it works. – CodingYoshi Oct 13 '17 at 01:41
@SeanCuvanov I create a fiddle for you so you can see how it works. – CodingYoshi Oct 13 '17 at 01:59
so for the event you wouldn't just pass event? you would pass a Javascript Object ? – Coova Oct 13 '17 at 03:19
@SeanCuvanov No. if you see the fiddle in one we are passing some custom data but in the other one we are not passing anything but we still get an event parameter because jquery is passing it to us. If we send data then it is available via event.data – CodingYoshi Oct 13 '17 at 03:25

Pass parameter to bound function

2 Answers2