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
})
Related
I have a situation using BS3 modal events and my app functionality is wrapped in object with exposed methods (reveal module pattern). I have event received from BS and I what my $this to point to the Event object instead of the App object.
I tried jquery this context with the jQuery proxy, which seems to be the best thing, but for some reason the things didn't worked for me
var globalAppDef = (function() {
function modalFilters() {
$('#filtersMore')
.on('show.bs.modal', (event) => {
const sourceElement = $(event.relatedTarget);
$(sourceElement.data().filters).removeClass('hidden');
})
/*
* Transfer the proper #this of the event outside the {globalAppDef} Object
*/
.on('hidden.bs.modal', $.proxy((event) => {
$(this).find(".form-list-items-1").addClass('hidden');
$(this).find(".form-list-items-1").addClass('hidden');
}, this));
}
return modalFilters: modalFilters
}
});
var globalApp = new globalAppDef();
globalApp.initialize();
$(document).ready(function () {globalApp.modalFilters()});
What I what to achieve is on the second hidden.bs.modal $this to point to my Modal, which is $('#filtersMore') element.
actually it it was the Arrow function the reason for that this stayed in the Object context.
That way worked:
.on('hidden.bs.modal', $.proxy(function (event) {
$(this).find(".form-list-items-1, .form-list-items-2").addClass('hidden');
}, $('#filtersMore')));
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
});
Here is the code :
$('.el')
.drag("init", function () {
//
})
.drag("start", function () {
//
})
.drag("end", function () {
//
});
I couldnt find a way to pass the parameters in the case below
$('.el').on({
drag: function(){
//*init* functions
},
drag: function(){
//*start* functions
},
drag: function(){
//*end* functions
}
})
Is it possible to pass parameters while using on event delegation for multiple events at once. Or the only solution is using on for multiple times.
You should probably lead with the fact that you're using a plugin, more specifically this plugin.
The docs are pretty clear, there are events built in, such as draginit, dragend etc. that can be used instead of the drag() method
$(document).on({
draginit: function(){
//*init* functions
},
dragstart: function(){
//*start* functions
},
dragend: function(){
//*end* functions
}
}, '.el');
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.
When I fire a function I want it to apply listeners just to elements I pass, particular this jQuery element.
addEventListeners(this);
function addEventListeners(el) {
$(el).mouseenter(function() {
$(this).stop(true,true).switchClass("", "HIGHLIGHT", 400, "easeInOutQuad");
});
$(el).mouseleave(function() {
$(this).stop(true,true).switchClass("HIGHLIGHT", "", 400, "easeInOutQuad");
});
}
It fires from AJAX result:
$.post(url,{el:wartosc_inputa},function(returned) {
var data = $(returned).hide();
$("#listaElementow").prepend(data);
data.slideDown();
loading();
addEventListeners(this);
});
How to code it good? This code is not passing variables from addEventListeners(this); to function.
in the ajax callback function "this" will be the ajax object i think and no longer an element so you need to save "this" in a variable before the ajax starts.
that = this;
$.post(url,{el:wartosc_inputa},function(returned) {
var data = $(returned).hide();
$("#listaElementow").prepend(data);
data.slideDown();
loading();
addEventListeners(that);
});
Judging from the context of the rest of your success handler, I assume returned is the DOM element you're attempting to bind your handlers to. Assuming this is the case:
$.post(url,{el:wartosc_inputa},function(returned) {
var data = $(returned).hide();
$("#listaElementow").prepend(data);
data.slideDown();
loading();
addEventListeners(data[0]);
// change this ^^^^
// pass the DOM element here, or
// change the addEventListeners function to take a jquery element
});
this in that context is not what you expect it to be. Try this:
var self = this;
$.post(url,{el:wartosc_inputa},function(returned) {
var data = $(returned).hide();
$("#listaElementow").prepend(data);
data.slideDown();
loading();
addEventListeners(self);
});