I'm using JQuery and trying to use delegate for the hover action. Problem is the hover action can get two handlers, the handle in and the handle out. How can I achieve this using delegate?
I've tried this and it didn't work:
$(document).delegate('.box', 'hover',
function() { $(".a").addClass(".hover");},
function() { $(".a").removeClass(".hover");});
According to the docs for .hover:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
So you should be able to just call delegate once for each of these functions:
$(document)
.delegate('.box', 'mouseenter', function() { alert(1); })
.delegate('.box', 'mouseleave', function() { alert(2); });
An alternative to #Justin's solution is to check the event type in the callback:
function onMouseenter()
{
alert(1);
}
function onMouseleave()
{
alert(2);
}
$(document).delegate('.box', 'hover', function(event)
{
if (event.type === 'mouseenter') onMouseenter.apply(this, arguments);
else onMouseleave.apply(this, arguments);
});
That said, it's unnecessary to use .delegate() if you're just going to delegate to document. Use .live() instead, which is much more concise:
$('.box').live('hover', function (event)
{
// snip...
});
Related
Is it possible listen click and change for one code?
$(document).on("click", "button.options_buy",function(event) {
// same code
}
$(document).on("change", "select.options_buy",function(event) {
// same code
}
I try this
$(document).on("click change", "button.options_buy,select.options_buy",function(event) { }
It works but I want 'click' only for 'button.options_buy' and 'change' for 'select.options_buy'
is it possible?
Best way to do it is to have two event handlers as you have, but only have a common function that is called from each:
$(document).on("click", "button.options_buy",function(event) {
commonFunction();
})
$(document).on("change", "select.options_buy",function(event) {
commonFunction();
})
function commonFunction(){
//common function code
}
I would like to extend your code.
$(document).on("click change", "button.options_buy,select.options_buy",function(event) {
if(event.type=="click"){
someFunction();
} else if(event.type=="change"){
someFunction();
}
}
You can use .on() to bind a function to multiple events:
$('#foo').on('keypress click change', function(e) {
//
});
OR declare a function and call it for each event
$('#foo')
.change(myFunction)
.click(myFunction)
.blur(myFunction)
jQuery .bind()
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
OR
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});
The below code works -
$("#x").hover(function() {
alert("hovered");
});
But the below code does not. Please explain why?
$("#x").on("hover", function() {
alert("hovered");
});
Note - #x is a button element. and the above code works for "click" event
From jQuery .on()'s documentation:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
You could pass an object to the on method:
$("#x").on({
mouseenter: function() {
// ...
},
mouseleave: function() {
// ...
}
});
And if you want to delegate the events:
$('#aStaticParentOfX').on({
mouseenter: function() {
// ...
},
mouseleave: function() {
// ...
}
}, "#x");
Even the .live() has depricated from jQuery 1.9 if your version is below 1.9 you can use
$("#x").live("hover", function() {
alert("hovered");
});
First: jQuery hover need 2 functions as arguments More here: http://api.jquery.com/hover/
$('#x').hover(
function() {
// your 'mouseenter' event handle
}, function() {
// your 'mouseleave' event handle
});
Second: you can simply use CSS hover pseudo-class if your code operate on the same element (#x)
#x:hover {
// this will be added to #x when 'mouseenter', and remove when 'mouseleave'
background-color: red;
}
try this..
$("#x").on("mouseover", function () {
//wrire your code here
});
if you populated elements through javascript,use the following. It is replacement for deprecated jQuery.live.
$("body").on("mouseover","#x", function () {
//wrire your code here
});
see this js fiddle http://jsfiddle.net/3aq48p5m/3/
As it is possible to define multiple event handlers in one single function in jQuery like this:
$(document).on({
'event1': function() {
//do stuff on event1
},
'event2': function() {
//do stuff on event2
},
'event3': function() {
//do stuff on event3
},
//...
});
Then again we can do this:
$(document).on('click', '.clickedElement', function() {
//do stuff when $('.clickedElement') is clicked
});
I was wondering if it is also possible to do something like this (the following code does not work, it's just for illustration):
$(document).on('click', {
'.clickedElement1', function() {
//do stuff when $('.clickedElement1') is clicked
},
'.clickedElement2', function() {
//do stuff when $('.clickedElement2') is clicked
},
//... and so on
});
This code gives me an error complaining about the "," after '.clickedElementX'. I also tried it like this:
$(document).on('click', {
'.clickedElement1': function() {
//do stuff when $('.clickedElement1') is clicked
},
//... and so on
});
Then I don't have the error but also the function is not executed. Is there a way to collect all the click handlers in one place like this or would I have to always do it like this:
$(document).on('click', '.clickedElement1', function() {
//do stuff when $('.clickedElement1') is clicked
});
$(document).on('click', '.clickedElement2', function() {
//do stuff when $('.clickedElement2') is clicked
});
//... and so on
You can chain :
$(document).on({
click: function() {
//click on #test1
},
blur: function() {
//blur for #test1
}
}, '#test1').on({
click: function() {
//click for #test2
}
}, '#test2');
FIDDLE
Short answer: no, you have to bind them all separately.
Long answer: You can create an "infrastructure" for your site and have all events in one place. e.g.
var App = function(){
// business logic
return {
Settings: { ... },
Events: {
'event1': function(){
},
'event2': function(){
},
'event3': function(){
}
}
}
}();
Then wiring it up involves:
$(document).on(App.Events);
Then internally you can add then new bindings to your App object but still remains wired up in only one place (as far as jQuery is concerned). You could then make some kind of subscriber model within App (e.g. App.Subscribe('click', function(){ ... })) and each new subscription still is only wired through the single .on() binding.
but, IMHO, this is a lot of overhead with very little pay-off.
$(document).on('click' , function(e){
if($(e.target).hasClass("some-class")){
//do stuff when .some-class is clicked
}
if($(e.target).hasClass("some-other-class")){
//do stuff when .some-other-class is clicked
}
});
you can choose any some-class you want
It can be easily done, really:
$(document).ready(function()
{
$(this).on('click', '.one, .two',function()
{
if ($(this).hasClass('one'))
{//code for handler on .one selector
console.log('one');
}
else
{//code for handler on .two selector
console.log('two');
}
console.log(this);//code for both
});
});
If multiple events is what you're after:
$(document).ready(function()
{
$(this).on('click focus', '.one, .two',function()
{
if (event.which === 'click')
{
if ($(this).hasClass('one'))
{
console.log('one');
}
else
{
console.log('two');
}
}
else
{
console.log('focus event fired');
}
console.log(this);
});
});
Play around with this: here's a fiddle
documentation on event
jQuery's on, which is used here as though it were delegate
you can use a helper function:
function oneplace(all){
for (var query in all){
$(query).on('click', all[query]);
}
}
and then call:
oneplace(
{'#ele1':function(){
alert('first function');
},
'#ele2':function(){
alert('second function');
}});
jsfiddle here: http://jsfiddle.net/5zwkf/
I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?
$(document).on('hover', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function () {
$(this).find('.dropfcnt').hide('blind', function () {
$('.actionfcnt').hide();
});
});
Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Source: http://api.jquery.com/on/#additional-notes
That pretty much says it all, you cant use "hover" for that:
$(document).on('mouseenter','.top-level', function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level', function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
there is no "hover" event.
there is .hover() function that takes 2 callbacks (as in your example).
Try:
$(".top-level").on({
mouseenter: function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
},
mouseleave: function (event) {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
OR
$(".top_level").on("hover", function(event) {
if(event.type == "mouseenter") {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}
else if (event.type == "mouseleave") {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
.on function has only 3 parameters : http://api.jquery.com/on/
If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.
$('.top-level').hover(function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.
If you need to, then use on for mouseenter and mouseleave events:
$(document).on('mouseenter', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
Try
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
Trying to figure out how to use the Jquery .on() method with a specific selector that has multiple events associated with it. I was previously using the .live() method, but not quite sure how to accomplish the same feat with .on(). Please see my code below:
$("table.planning_grid td").live({
mouseenter:function(){
$(this).parent("tr").find("a.delete").show();
},
mouseleave:function(){
$(this).parent("tr").find("a.delete").hide();
},
click:function(){
//do something else.
}
});
I know I can assign the multiple events by calling:
$("table.planning_grid td").on({
mouseenter:function(){ //see above
},
mouseleave:function(){ //see above
}
click:function(){ //etc
}
});
But I believe the proper use of .on() would be like so:
$("table.planning_grid").on('mouseenter','td',function(){});
Is there a way to accomplish this? Or what is the best practice here? I tried the code below, but no dice.
$("table.planning_grid").on('td',{
mouseenter: function(){ /* event1 */ },
mouseleave: function(){ /* event2 */ },
click: function(){ /* event3 */ }
});
That's the other way around. You should write:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, "td");
Also, if you had multiple event handlers attached to the same selector executing the same function, you could use
$('table.planning_grid').on('mouseenter mouseleave', function() {
//JS Code
});
If you want to use the same function on different events the following code block can be used
$('input').on('keyup blur focus', function () {
//function block
})
I learned something really useful and fundamental from here.
chaining functions is very usefull in this case which works on most jQuery Functions including on function output too.
It works because output of most jQuery functions are the input objects sets so you can use them right away and make it shorter and smarter
function showPhotos() {
$(this).find("span").slideToggle();
}
$(".photos")
.on("mouseenter", "li", showPhotos)
.on("mouseleave", "li", showPhotos);
And you can combine same events/functions in this way:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
'click blur paste' : function() {
// Handle click...
}
}, "input");
Try with the following code:
$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change',
function() {
}
);