jQuery - using $(this) in custom function

Question

I'm trying to create a custom function that unbinds and then binds an event. It looks like this:

App.bindEvent = function(selector, eventType, eventHandler) {
    $(selector).unbind(eventType);
    $(selector).bind(eventType, function(event) {
        eventHandler(event);
    });
};

However, the problem I am facing is that I cannot use the this keyword to reference the DOM element that was clicked. For example, I cannot do this:

App.bindEvent("#my-element", "click", function() {
    var myId = $(this).attr("data-my-id");
});

How would I go about getting the this keyword to point to the clicked DOM element like it does in jQuery.bind()?

Thanks for any help.

Jerod Venema · Accepted Answer · 2011-05-24 16:41:08Z

3

Change:

eventHandler(event);

To:

eventHandler.call(this, event);

That'll change the "scope" of your function to be the same as the scope of the original "bind" call.

answered May 24, 2011 at 16:41

Jerod Venema

44.7k5 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eli · Accepted Answer · 2011-05-24 16:47:44Z

2

How about this instead:

App.bindEvent = function(selector, eventType, eventHandler) {
    var element = this;

    $(selector).unbind(eventType);
    $(selector).bind(eventType, function(event) {
        eventHandler.call(element, event);
    });
};

edited May 24, 2011 at 16:47

answered May 24, 2011 at 16:41

Eli

17.8k4 gold badges40 silver badges49 bronze badges

Comments

SLaks · Accepted Answer · 2011-05-24 16:40:32Z

1

You need to call the handler in the context of the object:

eventHandler.call(this, event);

answered May 24, 2011 at 16:40

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Joseph · Accepted Answer · 2011-05-24 16:44:35Z

0

I think you're trying to refer to

event.target

For example:

App.bindEvent("#my-element", "click", function(event) {
    var myId = $(event.target).attr("data-my-id");
});

check out jquery's event documentation

answered May 24, 2011 at 16:44

Joseph

25.6k8 gold badges83 silver badges129 bronze badges

Collectives™ on Stack Overflow

jQuery - using $(this) in custom function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related