JSfiddle jsfiddle
I would like to use this concept of event delegation on each name spaced event. Appernetly it is more optimized than .big-ul li. I unfortunately cannot find the proper syntax to make it work while using namespaces or while trying to attach multiple event handlers simultaneously using a plain object?
$(".big-ul").on({
"click.namespace", "li": function(event){
$(this).toggleClass("active");
},
"mouseenter.namespace" , "li": function(event){
$(this).addClass("inside");
},
"mouseleave.namespace", "li": function(event){
$(this).removeClass("inside");
}
});
example of event delegation from jquery's site
$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});
You can't attach multiple events to multiple functions like that. What you could do is using an each function on an object containing all the needed infos. You could even store your namespace-name (haha) in a separate variable:
Example on jsFiddle
var $root = $(".big-ul");
var namespace = 'namespace';
var events = [
{
event: "click"+"."+namespace,
delegate: "li",
fn: function(event){
$(this).toggleClass("active");
}
},
{
event: "mouseenter"+"."+namespace,
delegate: "li",
fn: function(event){
$(this).addClass("inside");
}
},
{
event: "mouseleave"+"."+namespace,
delegate: "li",
fn: function(event){
$(this).removeClass("inside");
}
}
]
for(i=0;i<events.length;i++){
$root.on(events[i].event, events[i].delegate, events[i].fn);
}
The advantage compared with the accepted solution:
It's a far more flexible solution as you could send the events-Object across modules or dynamically bind events with one single function, when you always use the same event-Object structure.
You can delegate from one root object to different child nodes, not only one.
Example:
/* events array*/
var events = [
{
root: "root-query-string",
event: "eventname",
delegate: "delegate-query-string",
fn: function
}
]
/* dynamic batch bind function */
function batchBind(events) {
for(i=0; i<events.length; i++){
$(el.root).on(events[i].event, events[i].delegate, events[i].fn);
}
}
how about something like this?
$(".big-ul").on("click.namespace mouseenter.namespace mouseleave.namespace", "li", function(event){
var eventMatch = event.handleObj.origType + "." + event.handleObj.namespace;
if(eventMatch == "click.namespace"){
$(this).toggleClass("active");
}
if(eventMatch == "mouseenter.namespace"){
$(this).addClass("inside");
}
if(eventMatch == "mouseleave.namespace"){
$(this).removeClass("inside");
}
});
would that not work?
EDIT
you could also replace the mutiple if statements with a switch statement if you preferred... it would probably give better performance too (if you are worried about that).
$(".big-ul").on("click.namespace mouseenter.namespace mouseleave.namespace", "li", function(event){
var eventMatch = event.handleObj.origType + "." + event.handleObj.namespace;
switch(eventMatch){
case "click.namespace":
$(this).toggleClass("active");
break;
case "mouseenter.namespace":
$(this).addClass("inside");
break;
case "mouseleave.namespace":
$(this).removeClass("inside");
break;
}
});
EDIT2 updated so jsfiddle will work based on what #Nirazul said.
Example on jsFiddle
The each answer given will not be more efficient than using the .big-ul li selector. My theory being that a basic on() selector runs against the selector once and connects the event immediately whereas the deferred on() with selector runs the selectors each time the events occur (to find the matching elements).
You might as well do it this way and keep it simple:
$(".big-ul li").on({
"click.namespace": function (event) {
$(this).toggleClass("active");
},
"mouseenter.namespace": function (event) {
$(this).addClass("inside");
},
"mouseleave.namespace": function (event) {
$(this).removeClass("inside");
}
});
http://jsfiddle.net/AzQBR/1/
I am happy to be overruled about the speed of deferred on() compared to non-deferred on() calls if someone can run performance stats.
Having looked over all the answers again (including my original one), I would recommend simply connecting each event separately using the deferred on() syntax:
var $bigul = $(".big-ul");
$bigul.on("click.namespace", "li", function (event) {
$(this).toggleClass("active");
});
$bigul.on("mouseenter.namespace", "li", function (event) {
$(this).addClass("inside");
});
$bigul.on("mouseleave.namespace", "li", function (event) {
$(this).removeClass("inside");
});
All the other solutions over-complicate the code. This is about a straight forward as you can get.
JSFiddle http://jsfiddle.net/AzQBR/2/
It is possible guys! But you wrote it in wrong way! Try this :
$(document).ready(function(){
$(document).on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
},'p');
});
Related
I have some dynamically generated elements with the class my-class on which I want to bind some events. I have the below code which works properly.
$(document).on("event1", ".my-class", function () {
alert("Event 1");
});
$(document).on("event2", ".my-class", function () {
alert("Event 2");
});
I want to refactor it so that there can be a single call to on for the category. Something like this
$(document).on(".my-class", {
"event1": function() {alert("Event1")},
"event2": function() {alert("Event2")}
});
Is this possible in jquery?
There might be a better way, but I've used this before and it worked for me:
Demo Fiddle
I wouldn't delegate off the document, instead I'd use the closest parent container.
JS:
$('body').on('click mouseenter', 'div', function(e) {
if (e.type === 'click') {
$('div').html('clicked');
}
else { //you'd need an else if here if you had more than two event types
$('div').html('mouse enter');
}
});
I have function to detect idle state of user. I want to update database if any of the event occurs.Now i have script like this
$("body").mousemove(function(event) {
myfuction();
});
I want to convert above script like this
$("body").anyOfTheEvent(function(event) {
myfuction();
});
How can i do this?
You can find the event name using the e.type property. Try looking this example
$('#element').bind('click dblclick mousedown mouseenter mouseleave',
function(e){
alert("EventName:"+e.type);
});
The jsfiddle for this is here http://jsfiddle.net/qp2PP/
You could have an array of the events you're interested in and subscribe to all of them
var events = ['click','mousemove','keydown'] // etc
$.each(events,function(i,e){
$('body')[e](myfuction);
});
Get a list of events here: http://api.jquery.com/category/events/
You can bind more than one event with bind()
$('#foo').bind('click mousemove', function(evt) {
console.log(evt.type);
});
just use on(), with a space-delimited list of events:
$('body').on('mousedown click', function(e) {
var eventType = e.type;
// do stuff
});
References:
on().
Instead of bind to specific element, you can bind directly to document.
$(document).bind('click mousemove', function(evt) {
document.getElementById("demo").innerHTML = Math.random();
});
Example in CODEPEN
I have a series of elements (lets call them '.my-elements') - some load on document ready, while others are loaded later via a pagination script.
I would like to set a variable according to whether or not the mouse is over these elements. The code below works, but I suspect there is a better way... Can I do this so I only have to reference the DOM once?
$(document).on('mouseenter','.my-elements', function(){
mouse_is_inside = true;
});
$(document).on('mouseleave','.my-elements', function(){
mouse_is_inside = false;
});
Thanks!
You can bind to both together and check the event.type:
$(document).on('mouseenter mouseleave', '.my-elements', function (ev) {
mouse_is_inside = ev.type === 'mouseenter';
});
Or, if you want to keep them separate, .on has another syntax that takes an event map:
$(document).on({
mouseenter: function () {
mouse_is_inside = true;
},
mouseleave: function () {
mouse_is_inside = false;
}
}, '.my-elements');
Check out jQuery hover which is the same as:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
UPDATE: I just realized you need to persist the events via the on() method. In that case, you can use an event map like so:
.on({
mouseenter: function() {
console.log('enter');
},
mouseleave: function() {
console.log('bye!');
}
})
Almost all jQuery methods return objects, so you can chain them together:
$(document).on('mouseenter','.my-elements', function(){
mouse_is_inside = true;
}).on('mouseleave','.my-elements', function(){
mouse_is_inside = false;
});
You could also try:
$(".my-elements").hover(function(eIn) {
// do work for mouse over
},
function(eOut) {
// do work for mouse out
});
update and correction
realized you need more dynamic lock in which case Jonathan Lonowski's or Derek Hunziker's is perfect
For starters, you can select for your elements instead of document.
$('.my-elements').on('mouseenter', function(){
mouse_is_inside = true;
});
You could try a shortcut notation like this...
$('.my-elements').on('mouseenter mouseleave', function(){
mouse_is_inside = !mouse_is_inside;
});
This will negate the value every time the mouse goes in or out, which should keep the mouse_is_inside variable set to the right value.
$('.my-elements').on('mouseenter mouseleave', function(event){
mouse_is_inside = event.type === 'mouseenter';
});
but its generally not a good idea to have a global variable incidating a event state
I have a piece of JQuery that creates a row in a table and in one of the cells there is an X that is surrounded by a class. When it is dynamically created and then clicked on the click listener does not fire.
Here is the code.
$('#add').click(function() {
$( '#table' ).append('<td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});
Since the <td> element does not yet exist when you register your event handler, you have to use live() or delegate() for the handler to be triggered later:
$(".x").live("click", function() {
alert("Fired");
});
$(".x").live("click", function()
{
alert("Fired");
});
Live adds events to anything added later in the DOM as well as what's currently there.
Instead of
$('.x').click(function() {
alert('Fired');
});
Change to this
$('.x').live('click', function() {
alert('Fired');
});
It binds the click function to any created element with class x
You need to use the .live function for content that's dynamically generated.
so replace
$('.x').click(function() {
with
$('.x').live('click',function() {
You are first creating the listener to all .x elements (of which there are presumably zero), then later adding new .x elements.
There are two solutions: one is to use jQuery live, the other is to rewrite your code:
var xClickHandler = function() {
alert('Fired');
};
$('#add').click(function() {
$('#table').append(
$('<td class="x">X</td></tr>').click(xClickHandler);
);
});
Use live instead of click:
$('.x').live("click", function() {
alert('Fired');
});
The html you are appending to the table has a typo, you have missed out the beggining tr tag:
$('#add').click(function() {
$( '#table' ).append('<tr><td class="x">X</td></tr>');
});
$('.x').click(function() {
alert('Fired');
});
I think you need to use the live method. http://api.jquery.com/live/
$('.x').live('click', function() {
// Live handler called.
});
Is there another in jquery to run a function at page load and at a keyup event instead of the way I'm doing it?
$(function() {
totalQty();
$("#main input").keyup(function() {
totalQty();
});
});
Disregarding live or delegate optimizations, you can trigger an event like this:
$(function() {
$("#main input").keyup(function() {
totalQty();
}).filter(":first").keyup(); //Run it once
});
No need for the filter if it's not on multiple elements, just leave it out in that case.
You can use $(document).ready event to run functions on load:
$(document).ready(function(){
/* your code here */
});
Here's what I would do (jQuery 1.4+ )
$(document).ready(function() {
totalQty();
$("#main").delegate("input","keyup",function() {
totalQty();
});
});
You could use $.live(), which does event delegation, which is MUCH more efficient than created an event listener for every single input tag...and then missing any dynamically created ones. Try the following:
$(document).ready(function() {
totalQty();
$('#main input').live('keyup', function() {
totalQty();
});
});