Is there a way to remove the binding below, without removing other bindings on that element that deal with scroll? I tried the unbind('scroll', scrollHandler) and it didnt work also. I have another scroll binding that is removed because of this. Is there a way to do this with a namespace?
var scrollHandler = function () {
// Inner Logic
};
windowElement.unbind('scroll').scroll(scrollHandler);
Fixed it by using this.
windowElement.unbind('scroll.fixedTop').bind('scroll.fixedTop', scrollHandler);
You can use on() and off():
http://jsfiddle.net/STPcy/
var handler1 = function() {
console.log('handler1');
};
var handler2 = function() {
console.log('handler2');
};
$('#myDiv').on('click', handler1);
$('#myDiv').on('click', handler2);
$('#myDiv').off('click', handler1);
This results in only handler2() being called.
Related
I have one link:
link
And I have two different onclick function set to the two classes like this:
jQuery(".lorem").each(function(){
this.onclick = function() {
// stuff
}
});
and
jQuery(".hello").each(function(){
this.onclick = function() {
// stuff
}
});
This stops the top one to work. Why? And how can I make both functions work while being separated?
You can only assign one function to the onclick property. You should use normal jQuery event binding, it allows multiple handlers:
$(".lorem").click(function() {
// stuff
});
$(".hello").click(function() {
// stuff
});
If you want to do it with native Javascript, you can use addEventListener; as the name suggests, these are additive, they don't replace.
jQuery(".lorem").each(function(){
this.addEventListener("click", function() {
// stuff
})
});
jQuery(".hello").each(function(){
this.addEventListener("click", function() {
// stuff
})
});
When you are using query, why use .onclick on the DOM element (therefore overwriting the previous binding). Instead use jQuery's .on:
$('.lorem').on('click', function(){
// something
});
$('.hello').on('click', function(){
// something else
});
I have this function onclick event of custom tag densitybtn='yes'
$("[densitybtn='yes']").on('click', function () {
var no_of_people = 0;
//calcdensity
$("[calcdensity='yes']").each(function () {
no_of_people = parseInt($(this).val()) + no_of_people;
});
var total_density = parseInt(carpetArea) / parseInt(no_of_people);
$("#densityVal").html(Myval);
});
Can i extend same code by extending it to $("[calcdensity='yes']").on('blur')
$("[calcdensity='yes']").on('blur').$("[densitybtn='yes']").on('click', function () {
});
Am not sure on executing same code on different events
Let me know is this method correct? or is there any alternative way available?
Define the function normally (not as an anonymous function) and pass the function to the event listeners
function listener() {
var no_of_people = 0;
//calcdensity
$("[calcdensity='yes']").each( function() {
no_of_people = parseInt($(this).val())+no_of_people;
});
var total_density = parseInt(carpetArea)/parseInt(no_of_people);
$("#densityVal").html(Myval);
}
$("[densitybtn='yes']").on('click', listener);
$("[calcdensity='yes']").on('blur', listener);
Nope, thats not a good practise.
Instead you can write a function for the second intent and call it on blur of $("[calcdensity='yes']").
You can bind multiple events using jQuery's .on() method by space-separating the event arguments.
$("[densitybtn='yes']").on('click blur', function() {
// actions to perform
})
You can bind events to multiple elements using jQuery's .add() method.
$("[densitybtn='yes']").add("[calcdensity='yes']").on('click blur', function() {
// actions to perform
})
I am trying to bind an liszt:ready event of my list, to be invoked once that the list has been initialized by chosen.
I follow the steps that here are describing without any success.
This is my code:
var initPreferredCollaboratorChosen = function () {
$("#preferredCollaboratorChosenId").chosen({width: "95%"}).trigger("chosen:ready");
};
var initListener = function () {
$("preferredCollaboratorChosenId").on("chosen:ready", function(){
alert("Hey, I am ready!");
});
initPreferredCollaboratorChosen()
};
I try with "liszt:ready" instead "chosen:ready" as well.
Can anyone that has work with this plugin tell me how make it?.
Regards.
I have variables that have multiple functions in them. I then want to call these variables in a .click event. One works fine, but I want to have two, or even more. How can I do this? Below is the code I would expect to work.
var hideServices = function() {
jQuery(".services-inner").css({"opacity": "0"});
jQuery(".insignia-inner").css({"opacity": "0"});
jQuery(".insignia-inner-text").css({"opacity": "0"});
};
var showMilitaryKit = function() {
jQuery(".military-kit-inner").css({"opacity": "1"});
};
var showProperty = function() {
jQuery(".property-kit-inner").css({"opacity": "1"});
};
jQuery(".military-kit-hover").click(hideServices, showMilitaryKit);
jQuery(".property-hover").click(hideServices, showProperty);
I'm convinced I haven't combined my variables in the .click event on the last line properly, but I can't find any documentation on what I want to achieve. Does anyone have a tweak that would work for me?
Wrap the two calls in an anonymous function:
jQuery('.military-kit-hover').click(function() {
hideServices();
showMilitaryKit();
});
If you need to preserve the event object or this, do this:
jQuery('.military-kit-hover').click(function(e) {
hideServices.call(this, e);
showMilitaryKit.call(this, e);
});
jQuery(".military-kit-hover").click(function() {
hideServices();
showMilitaryKit();
});
More in JQuery.click() documentation.
I am trying to add a simple delay to a mouseover event of a child and having difficulties. (Still learning!)
This enables me to show the popup after a delay, but shows all of them simultaneously:
onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'
and this works to show only the popup I want with no delay:
onmouseover='$(this).children(\".skinnyPopup\").show()'
but the combination does not:
onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'
Any help would be appreciated. Thanks!
You need to define what this is when it executes, something like this would work:
setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)
Or just use .delay(), like this:
$(this).children(".skinnyPopup").delay(600).show(0);
Both of the above are quick fixes, I suggest you move away from inline handlers and check out an unobtrusive method (see this answer by Russ Cam for some great reasons), for example:
$(function() {
$('selector').mouseover(function() {
$(this).children(".skinnyPopup").delay(600).show(0);
});
});
It's because this is bound to the global context, not the element. Use something like the following instead:
// put this in your document head -- replace element with a selector for the elements you want
$(function () {
$(element).bind("mouseover", function () {
var e = $(this);
setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
});
});
If you're adamant about inline event handlers, the following should also work:
onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'