Jquery Widget - Events

Question

I am building a simple JQuery widget. My widget builds appends a few items. I would like to know how to properly add event-functions to these newly added items from within the widget.

For example:

(function ($) {
    $.widget('be.tagEditor', {
        options: {
        },
        _init: function () {
            var me = this;
            createObj();
        },
        createObj: function() {
            var me =this,
                obj = me.element;
            obj.append('<div class="example">');
        }
    });
})(jQuery);

If I had something like the above, what would be the proper way to add events to the div?

Sebastian Zartner · Accepted Answer · 2015-07-08 08:46:56Z

3

The most efficient method is to use jQuery's .on() event binding. For example:

$(document).on('click', '.example', function () { ... });

You can define that anywhere in your code and it will fire when an element with that class (here example) has the appropriate trigger (here click).

This is more efficient than adding event handlers to each item as it is created, especially when the number of elements is potentially large.

Note: Earlier versions of jQuery had a .live() method to achieve this, which got removed in version 1.9. The equivalent to the code above in those versions would look like this:

$('.example').live('click', function () { ... });

edited Jul 8, 2015 at 8:46

Sebastian Zartner

20.4k10 gold badges104 silver badges143 bronze badges

answered Mar 27, 2011 at 19:59

Liza Daly

2,97325 silver badges31 bronze badges

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

2 Comments

redsquare Over a year ago

Note if you do the above you must ensure the elements do not already have a live binding otherwise you will add a duplicate event

Liza Daly Over a year ago

Right, this should go somewhere in the outer scope of the program, not inside a loop.

Sebastian Zartner · Accepted Answer · 2015-07-08 08:30:35Z

0

I'd suggest to pass in an object literal to the jQuery contructor. That object can take anything you want. For instance:

obj.append('<div>', {
    'class':    'example',
    text:       'foobar!',
    click:      function(e) {
         alert('I was clicked!');
    }, 
    mouseenter: function(e) {
         alert('mouse hovered me, oh no!');
    },
    css:  {
        backgroundColor:  'red'
    }
});

You can add every event handler to that object literal jQuery can handle. In the above example it's adding a click and mouseenter event along with setting the text-content, the CSS class and a CSS property via css. To learn more about this have look at http://api.jquery.com/jQuery/ or, explained in more detail, at http://typeofnan.blogspot.com/2011/02/did-you-know.html.

edited Jul 8, 2015 at 8:30

Sebastian Zartner

20.4k10 gold badges104 silver badges143 bronze badges

answered Mar 27, 2011 at 19:59

jAndy

237k57 gold badges313 silver badges363 bronze badges

1 Comment

Serodis Over a year ago

Thank you for this, I will definitely look into this more, but for the current, Liza's response works perfectly.

Collectives™ on Stack Overflow

Jquery Widget - Events

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related