live() method for defining events in jQuery: how to create events on elements that match a selector, at the current time or in the future.
We’ve seen many techniques for defining and handling events in jQuery throughout the previous . To continue exploring the possibilities of this Javascript framework, we are now going to learn how to define “live” events. It’s something like a “live” or “lifetime” event definition of the page, that is, an event definition on current and future elements that match a selector.
The live() method works in a similar way to , except that the event assignment is “dynamic” and affects not only the elements that match the selector at the time of the call, but also all elements that can be matched. define in the future and match that selector.
I don’t know if you have been able to understand exactly what is achieved with live(), but we can see it with a simple example that will clarify everything. Let’s look at this sentence:
$(“.myclass”).bind(“click”, myfunction);
You are defining a “click” event on all elements of the class (CSS class) “myclass”. So far we must all know about the bind() method, so there should be no problem, but now let’s see this same statement but using the live() method.
$(“.myclass”).live(“click”, myfunction);
This does the same thing we did with bind(), but it will also affect all elements that may have the class “myclass” in the future and not just at the time that statement is executed.
How can there be other elements of that class in the future? Well, simply because you create them dynamically with jQuery or because you dynamically assign a CSS class, or another attribute, to an element that did not have it, or that you bring content through Ajax and that it has elements that match the selector, etc.
Example event handler assignment by live()
Let’s look at the following demonstration of how live() works. We have several elements:
Without several divisions where all but one have the “green” class. Let’s see how I can assign a “click” event through the live() method:
$(“.green”).live(“click”, function(e){
var element = $(this);
if (elem.html()!=”You clicked!!”){
elem.html(“You clicked!!”);
}else{
elem.html(“You clicked again!!”);
}
});
It is an event that allows us to change the text of the element when it is clicked and we apply it to all the elements of the “green” class.
Now we have a couple of buttons to do things with the page and change it up a bit.
When the first button is clicked, I’m going to insert a new element on the page that we’ll put the class “green”. I get it with this code:
$(“#insertarelem”).click(function(e){
var newElement = $(‘
‘);
newItem.appendTo($(document.body));
});
The elements that are created when this button is clicked will have the green class and therefore the functionality specified with the live() method to define the click event.
The second button assigns the “green” class to the DIV element at the beginning, which did not have it, which we achieve like this:
$(“#setclassgreen”).click(function(e){
$(“#ngreen”).addClass(“green”);
});
Assigning that class to the element will also apply the functionality defined for the click event with live().
This we can.
To finish, we leave the complete code of this example page of live() in jQuery.
“http://www.w3.org/TR/html4/strict.dtd”
>
Facebook Comments
Disqus