jQuery examples summary 5
Blogs20112011-08-11
Continue the summary.
1. delegate( selector, events ) Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
$("body").delegate("a", "click", function(event){
event.preventDefault();
});
jQuery('#mydiv').delegate('#mydiv > p', 'click', function() {
console.log(this.innerHTML);
});2. event.target The DOM element that initiated the event.
$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
});
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
}
$("ul").click(handler).find("ul").hide();3. live( eventType, handler ) .live() is my favorite. It is very powerful. However, it may occur performance issue, so use it when have to. Attach a handler to the event for all elements which match the current selector, now and in the future.
$('a').live({
click: function(){// do something on click},
mouseover: function() {// do something on mouseover }
});
$("p").live("myCustomEvent", function(e, myName, myValue) {
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
$("p").live({
"mouseover": function() {
$(this).addClass("over");
},
"mouseout": function() {
$(this).removeClass("over");
}
});Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will always propagate to the element to which they are delegated; event handlers on any elements below it will already have been executed by the time the delegated event handler is called.
To cancel only the default action by using the preventDefault method.
$("a").live("click", function(event){
event.preventDefault();
});4.trigger( eventType, extraParameters ) Execute all handlers and behaviours attached to the matched elements for the given event type. Using .trigger(‘click’) will not trigger the native click event. To simulate a default click, you can bind a click handler like so:
$('#someLink').bind('click', function() {
window.location.href = this.href;
return false;
});
$('input.mycheckbox').click(function() {
if (this.checked) {
$('#someLink').trigger('click');
}
});