I have a click event as follow which works fine:
$('#showmenu').off('click').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
show_menu();
return false;
});
where show_menu is:
function show_menu(e) {
if (!collapseForm.is(':visible')) {
collapseForm.show();
showMenu.removeClass(chevronDown).addClass(checvronUp);
searchAgain.hide();
} else {
collapseForm.hide();
showMenu.removeClass(checvronUp).addClass(checvronDown);
searchAgain.show();
}
}
I would like to be able to do something like that:
$('#showmenu').off('click').on('click', show_menu(e));
Is it possible to pass "e" to the callback function by doing the following?
function show_menu(e) {
e.preventDefault();
e.stopPropagation();
if (!collapseForm.is(':visible')) {
collapseForm.show();
showMenu.removeClass(chevronDown).addClass(checvronUp);
searchAgain.hide();
} else {
collapseForm.hide();
showMenu.removeClass(checvronUp).addClass(chevronDown);
searchAgain.show();
}
return false;
}
The event object is passed to the function when the function is called (by the event firing).
You have to pass the function to the on method.
$('#showmenu').off('click').on('click', show_menu);
Related
I need to add a Button to every select2 item and prevent the default event so only the button gets triggered.
I have the following code but the normal onSelect event still gets triggered:
select.on('select2:select', test2);
function test2(e) {
if (e.params.originalEvent.target.classList.contains('TreeButton')) {
//stop event execution
e.stopPropagation();
e.preventDefault();
return false;
} else {
//execute normal
}
}
Try to catch select2:selecting event:
select.on("select2:selecting", function (e) {
if (e.params.args.originalEvent.target.className === 'btn') {
e.preventDefault();
}
}
Here is a jsfiddle: http://jsfiddle.net/beaver71/dtjhpnm7/
As I want to unbind(off) the events I wrapped the code inside a function but as I need to see which key is pressed I need to get the event of the event(not sure how this is called.
// normal example
$('body').on('keydown',function( event ){
if(event.keyCode == 37){
// do something
}
});
// my example
function keyDownHandler() {
if(event.keyCode == 39) {
// does not work
}
}
$('body').on('keydown', keyDownHandler);
You need to get the event object, you can get it as callback function argument
function keyDownHandler(event) {
// set it here ----^^^^^^---
if(event.keyCode == 39) {
// works now
}
}
$('body').on('keydown', keyDownHandler);
$(document).ready(function () {
//1st way
$('body').on('keydown', function(event){
keyDownHandler(event);
});
//2nd way ,same as first but shorter use it for send event only
$('body').on('keydown', keyDownHandler);
//3rd way ,this way to send more data
$('body').on('keydown', {example:'hello world'},keyDownHandler2);
});
function keyDownHandler(event) {
console.log(event.keyCode);
}
function keyDownHandler2(event) {
console.log(event.keyCode);
console.log(event.data.example);
}
I have Jquery click event and i want to prevent multiple click before executing my function UpdateItemStatus(this.id);, so i have tried below code using on/off event,
$('#tableItems').on('click', 'tr', function (e) {
if ($(e.target).closest("td").hasClass("cssClick")) {
$(this).off(e);
UpdateItemStatus(this.id);
$(this).on(e);
}
});
but how do i turn .on? as it's not working, not able to click again.
How about having a global variable which decides the button click action?
Something like this?
var clickevent = true;
$('#tableItems').on('click', 'tr', function (e) {
if(clickevent){
if ($(e.target).closest("td").hasClass("cssClick")) {
clickevent = false;
UpdateItemStatus(this.id);
clickevent = true;
}
}
});
if UpdateItemStatus function has ajax then i recommend you to put clickevent = true inside success of that ajax
You don't need to use off() for your code. Use return false:
$('#tableItems').on('click', 'tr', function (e) {
if ($(e.target).closest("td").hasClass("cssClick")) {
return false;
} else{
//do stuff here
}
});
I would probably use something like this :
var inputstate = false;
$('#tableItems').on('click', 'tr', function (e) {
if ($(e.target).closest("td").hasClass("cssClick")) {
if(!inputstate){
inputstate = true;
setTimeout((function(element){
return function(){
UpdateItemStatus(element);
inputstate = false;
};
})(this),50);
}
}
});
the setTimeout used to "defer the call" of your UpdateItemStatus function.
Because if this listener is fired, (an other listener cannot be fired at the same time) the value of the boolean will change to the end state before that the next click will be handled
Seems like your UpdateItemStatus() uses some asynchronous call (ajax?), so here's how i would do it:
$('#tableItems').on('click', 'tr', function (e) {
var $td = $(e.target).closest("td");
if ($td.hasClass("cssClick")) {
$td.toggleClass("cssClick");
UpdateItemStatus(this.id).done(function(){
$td.toggleClass("cssClick");
});
}
});
and in UpdateItemStatus:
function UpdateItemStatus(id){
//do stuff
return $.ajax(...);
}
I have a javascript function (to Save the form values) already defined globally in a common js file and now I need to override that with some other functionality based on some condition. Is there any way I can attach a javascript function to the a href onclick dynamically? I tried this way but it is not working. Can anyone please help me?
Parent html:
<a href="#" onclick="Save();" id="SaveLink"/>
Common.js:
function Save()
{
//do something
}
My child html calls ValidateForm function (available in Common.js) to validate the form
and if it is not valid then stop calling the global Save() function.
function ValidateForm()
{
var responseValid = false; //false for now
if (!responseValid)
{
$("#SaveLink").on("click", function (e) {
alert("This response is not valid");
return false;
});
}
else
{
$("#SaveLink").on("click", "Save();"); //call the global Save function
}
}
Updated Code:
function ValidateForm()
{
var responseValid = false; //false for now
if (!responseValid)
{
//$("#SaveLink").prop("onclick", null);
$("#SaveLink")[0].onclick = null;
$("#SaveLink").on("click", function (e) {
alert("This response is not valid");
return false;
});
}
else
{
//call the global Save function
//$("#SaveLink").prop("onclick", null);
$("#SaveLink")[0].onclick = null;
$("#SaveLink").on("click", function (e) {
Save();
e.preventDefault();
});
}
}
<a href="#" id="SaveLink" onclick="$.Save(this.id);"/>
JQuery Code:
$.Save=function(id)
{
//by using id you can apply your conditions
}
You need to remove onclick event
function ValidateForm() {
var responseValid = false; //false for now
if (!responseValid) {
//Remove onclick attribute
$("#SaveLink").removeAttr('onclick');
//OR
$("#SaveLink").prop("onclick", null);
$("#SaveLink").on("click", function (e) {
alert("This response is not valid");
return false;
});
} else {
//call the global Save function
$("#SaveLink").on('click', Save);
}
}
You should pass function handler, not String:
$("#SaveLink").on("click", Save);
EDIT:
To prevent onclick in page you should remove it on DOM ready event. For example:
$( function() {
$( '#SaveLink' )[ 0 ].onclick = null;
});
function ValidateForm()
{
var isSave= true;
//do your form validation
if(validation fail) //if validation fail set isSave is false
isSave=false;
return isSave;
}
function save()
{
if(ValidateForm()) //it will only execute validation is not fail
{
// do your code
}
}
OnClick just call save function only
Just like the question states. I want to fire off an event that calls a method everytime the user clicks on the web page.
How do I do that without use of jQuery?
Without using jQuery, I think you could do it like this:
if (document.addEventListener) {
document.addEventListener('click',
function (event) {
// handle event here
},
false
);
} else if (document.attachEvent) {
document.attachEvent('onclick',
function (event) {
// handle event here
}
);
}
Here's one way to do it..
if (window.addEventListener)
{
window.addEventListener('click', function (evt)
{
//do something
}, false);
}
else if(window.attachEvent)
{
window.attachEvent('onclick', function (evt)
{
// do something (for IE)
});
}
$(document).click(function(){});
document.onclick = function() { alert("hello"); };
note that this will only allow for one such function though.