CODEWITHSUNDEEP
yuiyui3
Arun
Arun

Reputation: 655

Cannot bind a click event to all instances of a class with YUI

I am trying to simply bind a click event to all instances of a class using the .all method in YUI. For some reason it simply doesn't work. Here is the code:

YUI().use('io', 'json-parse', 'handlebars', 'node', 'event', function(Y) {
    Y.all(".edit-user-button").on("click", function() {
        alert("Click worked");
    });
});

As you can see, I've imported the event and node modules but nothing happens when I click the buttons with that class edit-user-button.

EDIT: I am generating the elements with the class edit-user-button dynamically using Handlebars. This would otherwise work if the class already existed in the DOM but it is failing because it is dynamically loading.

Upvotes: 0

Views: 347

Answers (2)

mmutilva
mmutilva

Reputation: 19014

The reason may be that the elements with class 'edit-user-button' are created dynamically (o the class itself is added dynamically) and are not in the DOM yet when your code that sets the event handler runs.

This can be solved using a technique called Event Delegation

Using the YUI library you can apply that technique using the delegate method:

Y.one(".someContainer").delegate('click', function(){
   alert("Click worked");
}, ".edit-user-button")

Info specific to YUI event delegation here.

Upvotes: 2

YannGuillemot
YannGuillemot

Reputation: 113

Give it a try letting the container delegate the event to your buttons.

Y.one(".container").delegate('click', function(){
   alert("Click worked");
}, ".edit-user-button")

More about this: http://yuilibrary.com/yui/docs/event/delegation.html

Hope this helps!

Upvotes: 3

Related Questions