Passing function and function argument in .on('click') event handler?

Question

When I click on the button it will say Bruce Wayne is Batman. In the last jQuery line, for the 'click' function, if I pass the parameter 'guy', the jQuery wont run, but if I don't pass in a parameter I get undefined. What am I doing wrong? Thanks in advance.

$("div").on('click', 'button', click(guy));

The jsFiddle link, HTML and JS are below.

https://jsfiddle.net/wrj5w1Lk/

<div>
    <button>
        Click Me! Click Me!
    </button>
    <p>Hello</p>
</div>

$(document).ready(function() {
    var Person = function(first, last, secret) {
        this.first = first;
        this.last = last;
        this.secret = secret;
    }

    var guy = new Person("Bruce", "Wayne", "Batman");
    var click = function(person) {
        $(this).closest('div').find('p').text(person.first + " " + person.last + " is " + person.secret);
    };

    $("div").on('click', 'button', click(guy));
});

Please [user the search](https://stackoverflow.com/search?q=%5Bjquery%5D+pass+argument+event+handler) before you ask a new question. — Felix Kling, Mar 14 '16 at 16:07
will do. got a little too excited and the thought of searching the forum didn't cross my mind. — , Mar 14 '16 at 16:19

Rory McCrossan · Answer 1 · 2016-03-14T15:53:43.603

2

You have two issues, firstly you need to wrap the call to click() in an anonymous function. Secondly you need to pass the reference of the current button element to your click() function. Try this:

var click = function($element, person) {
    $element.closest('div').find('p').text(person.first + " " + person.last + " is " + person.secret);
};

$("div").on('click', 'button', function() {
    click($(this), guy);
});

Updated fiddle

edited Mar 14 '16 at 15:53

answered Mar 14 '16 at 15:50

Rory McCrossan

331,213
40
305
339

`guy` isn't a string, it is defined in the javascript. – Karl Gjertsen Mar 14 '16 at 15:51
@KarlGjertsen you're right, my mistake. Answer updated. – Rory McCrossan Mar 14 '16 at 15:53
Your answer was posted first, so I've removed mine. – Karl Gjertsen Mar 14 '16 at 15:55
If you use the optional `[data]` parameter of the `.on()` function, you can avoid making the second function call altogether. Either way, it still works. +1 :) – War10ck Mar 14 '16 at 16:02
thanks for the inputs. i've literally have not gone through 'event' and '$element' yet... so im definitely going to read up on those later today. – Mar 14 '16 at 16:21
2

No problem, glad to help. Note that `$element` is just a variable name I defined, there's nothing special about it. The prepended `$` is just to show that the variable holds a jQuery object. – Rory McCrossan Mar 14 '16 at 16:22

War10ck · Answer 2 · 2016-03-14T15:59:31.130

I think what you're looking for is how to pass custom data to the event handler using .on(). The link references the optional [ data ] object of the .on() function. This allows you to pass custom data outside of the normal event data to your event handler for further processing. An example is shown below:

$(document).ready(function() {
    var Person = function(first, last, secret) {
        this.first = first;
        this.last = last;
        this.secret = secret;
    }

    var guy = new Person("Bruce", "Wayne", "Batman");
    var click = function(event) {
        $(this).closest('div').find('p').text(event.data.first + " " + event.data.last + " is " + event.data.secret);
    };

    $("div").on('click', 'button', guy, click);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button>
        Click Me! Click Me!
    </button>
    <p>Hello</p>
</div>

I've edited your snippet from your question to use this method of passing data. Your custom object is passed in the event.data object of the callback. By accessing, event.data.[first,last,secret] you can reference the properties of the Person(...) object from within your callback.

thank you!.. i haven't gone over "event" yet, so that's completely new to me. but i'm going to read up more on it. thanks so much. — , Mar 14 '16 at 16:20
Question, is event just a regular paremeter or a special javascript/jquery syntax? And many thanks in advance — , Mar 14 '16 at 23:51

Passing function and function argument in .on('click') event handler?

2 Answers2