I disabled the click event of image using unbind method. But I don't know how to recover the click event again.
Here is the code,
<img src="testimg.jpg" id="sub_form">
disabled the click event of above image using the code
$('#sub_form').unbind('click');
How do i recover the click event? I tried with the bind event
$('#sub_form').bind('click');
but it wont work.
Why I'm going for click event of image is ajax form submission. The code is,
$("#sub_form").click(function() {
var input_data = $('#testform').serialize();
$.ajax({
//my code
});
});
how can i achieve this after unbind of image is performed.
If you saved the handler, you can just invoke it again:
var handler = function() {
alert('click');
};
$('#sub_form').click(handler);
// disabling:
$('#sub_form').unbind('click', handler);
// reenabling:
$('#sub_form').click(handler);
If you don’t know what handlers that are bound, you can find and save them before unbinding:
// save the click handlers
var events = $('#sub_form').data('events'),
handlers = 'click' in events ? Array.prototype.slice.call(events.click) : [],
handler = function() {
$.each(handlers, function() {
this.handler();
});
};
// disable
$('#sub_form').unbind('click');
// reenable
$('#sub_form').bind('click', handler);
http://jsfiddle.net/sPPnE/
You can specify a function reference when calling .unbind():
For instance:
function myHandler( event ) {
}
// bind the click handler
$('#sub_form').bind('click', myHandler);
// remove only this exact click handler
$('#sub_form').unbind('click', myHandler);
// bind it again
$('#sub_form').bind('click', myHandler);
Sidenote: As for jQuery 1.7.x you should use the .on() and .off() equivalent methods.
Reference: .on(), .off(), .bind(), .unbind()
You need to provide the event handler with a function to run when the event occurs, try this:
$('#sub_form').bind('click', function() {
alert("You clicked #sub_form");
});
If you are going to be binding/unbinding regularly, it would be best to put the logic into it's own function so that it can be easily rebound:
$("#element").click(function() {
$("#sub_form").unbind();
// do something
$("#sub_form").bind('click', myFunc);
});
function myFunc() {
alert("You clicked #sub_form");
}
Related
I just started to learn js and need a little help: I have the following function:
//SET CHAT BEHAVIOR
function chatSettings() {
console.log('ChatSettings called')
function BtnAndScrollBar(texteditor) {
console.log('BTNAndScrollBar called');
const sendBtn = $('.cl.active').find('.sendBtn');
const attachBtn = $('.cl.active').find('.attachBtn');
console.log(sendBtn)
}
function sendAndDeleteMessage(send) {
console.log(send);
}
var sendBtn = $('.cl.active').find('.sendBtn');
sendBtn.mousedown(function () {
sendAndDeleteMessage(this);
});
var textEditor1 = $('.cl.active').find('.chatTextarea');
textEditor1.on('focus change mousedown mouseout keyup mouseup', function (){
console.log(this);
BtnAndScrollBar(this)
});
}
$('document').ready(function () {
console.log('hello');
$('.tabs').tabs();
chatSettings();
});
I prepared a js.fiddle - As you can see from console.log when clicking into the textarea, the eventListener always listens to #cl1, even if .cl.active switches along with the according TAB.
The events in the textarea are just relevant, if .cl is active. My target is to wrap all three eventListener into one and apply the event to the textarea in the active stream, but all I tried went wrong... Can anyone help? #Dontrepeatyourself #DRY
$(".chatTextarea").on(
'focus change mousedown mouseout keyup mouseup',
function (this) {
//this.id can contain the unique id
greatFunction(this);
});
This will bind event individually with unique id found with this keyword and also wraps all event listener into one function but this is better when you want to process each event with same functionality
please let me know if this helps.
Peace
$(".cl textarea").on('focus change mousedown mouseout keyup mouseup', function () {
greatFunction(this)
});
Tada!
P.S. Is there a reason greatFunction is defined inside window.onload?
Try using $(document).ready function to load code when the page loads.
Also use $('textarea #cl1').on to get the textarea with the #cl1 or whichever id you want to use and then call the function after using the .on.
Hope this helps!
Let me know if it works!
$(document).ready(function () {
function greatFunction(elem) {
//do stuff
}
$('textarea').on('focus change mousedown mouseout keyup mouseup', function () {
greatFunction(this)
});
}
First off, I changed the onload to bind with jQuery, so all your logic is doing jQuery bindings, rather than swapping back and forth between jQuery and vanilla javascript. Also, doing an actual binding removes an inline binding.
Next, the binding has been condensed into a single delegate event listener. Since you eluded in your comments that it wasn't working for the active element after the active was moved or added, this reflected that you were dealing with dynamic elements. Delegate event listeners are one way to handle such things.
Delegate event listeners bind on a parent element of the elements that will change, or be created. It then waits for an event to happen on one of it's children. When it gets an event it is listening for, it then checks to see if the element that it originated from matches the child selector (second argument) for the listener. If it does match, it will then process the event for the child element.
Lastly, I added some buttons to swap around the active class, so you could see in the snippet that the event handler will start working for any element that you make active, regardless of it starting out that way.
$(window).on('load', function () {
function greatFunction (elem) {
console.log(elem.value);
}
$(document.body).on(
'focus change mousedown mouseout keyup mouseup',
'.cl.active .chatTextarea',
function () {
greatFunction(this);
}
);
$('.makeActive').on('click', function () {
$('.active').removeClass('active');
$(this).closest('div').addClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cl1" class="cl active"><textarea class="chatTextarea">aa</textarea><button class="makeActive">Make Active</button></div>
<div id="cl2" class="cl"><textarea class="chatTextarea">bb</textarea><button class="makeActive">Make Active</button></div>
<div id="cl3" class="cl"><textarea class="chatTextarea">cc</textarea><button class="makeActive">Make Active</button></div>
I tried to disable the click functionality for the element with id #sports. It works if I invoke alert() inside the function, but I want it to work without invoking it. If I comment out that code, it's not working.
Here is my code:
$("#sports").off("click").on("click", function () {
alert("disable click");
});
You can disabled it with calling the off() method inside the on() method:
$("#sports").on("click", function (){ // on button click
console.log("click disabled"); // Do anything, console.log, alert, anything
$(this).off("click"); // then disable the click event, set it to off,
// this way the on click event won't fire
// again unless it's created, again
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sports">Click</button>
What about trying event.preventDefault()?
$("#sports").on("click", function (event){
event.preventDefault();
event.stopPropagation();
return false;
});
But if you want to disable it, you don't have to override its click function - it is enough to set 'disable' property of the DOM element:
$("#sports").disabled = true;
I was wondering if Javascript or jQuery have a way to delete an event listener. Let's say I want to make a function that I want to trigger only once, for example let's say I want to have a button that shows some hidden elements on the document, I would make this function (assuming the hidden elements have a hidden class that hides them):
jQuery('#toggler').click(function() {
console.log('Hidden elements are now shown');
jQuery('.hidden').removeClass('hidden');
});
Simple enough, right ? Now, my actual problem comes in, I don't want jquery to run that function again and again each time the button is clicked, because the elements are already revealed, so is there a clean way to do it ? So, in this example after clicking the toggler multiple times I want to get only one console message.
I could do jQuery(this).unbind('click'), but this results into removing ALL triggers and I only want to remove the current trigger.
What I usually do when I face such scenarios is solve it like this (which is ugly and doesn't actually prevent code execution, but only handles the code's results) :
var toggler_clicked = false;
jQuery('#toggler').click(function() {
if(toggler_clicked) return;
toggler_clicked = true;
console.log('Hidden elements are now shown');
jQuery('.hidden').removeClass('hidden');
});
Also I don't want to use jQuery's one, because I will have the same problem when I'll need to delete the trigger conditionally, so if you can help please give me a dynamic answer.
Thanks in advance !
You have to name your function like that:
var myFunction = function() {
console.log('Hidden elements are now shown');
jQuery('.hidden').removeClass('hidden');
};
And bind it this way
jQuery('#toggler').click(myFunction);
Then you can unbind it with :
jQuery('#toggler').off('click',myFunction);
Without unbinding the other listeners
You can try this:
var myFunc = function() {
console.log('Hidden elements are now shown');
jQuery('.hidden').removeClass('hidden');
jQuery(this).unbind('click', myFunc);
};
jQuery('#toggler').click(myFunc);
This way of calling unbind is such that only the listener for myFunc handler is removed and not all the events connected to the click on the toggler.
I would use the .on() and its opposite .off() methods to attach/detach the event handler. It is the recommended way since 1.7 instead of the .bind() and .unbind() versions that became deprecated as of jQuery 3.0.
$("#toggler").on("click", function(event) {
console.log('Hidden elements are now shown');
$('.hidden').removeClass('hidden');
// if (/* Add your condition here */) {
$(this).off(event);
// }
});
$("#toggler").on("click", function(event) {
console.log('Hidden elements are now shown');
$('.hidden').removeClass('hidden');
// if (/* Add your condition here */) {
$(this).off(event);
// }
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggler">Toggle</button>
<div class="hidden">
HIDDEN
</div>
Try this
var myFunction = function() {
console.log('Hidden elements are now shown');
jQuery('.hidden').removeClass('hidden');
};
Add the event listener like this:
jQuery('#toggler').addEventListener("click", myFunction);
And remove it like this:
jQuery('#toggler').removeEventListener("click", myFunction);
So all together this will do the trick:
var myFunction = function() {
console.log('Hidden elements are now shown');
jQuery('.hidden').removeClass('hidden');
jQuery('#toggler').removeEventListener("click", myFunction);
};
jQuery('#toggler').addEventListener("click", myFunction);
more about the HTML DOM removeEventListener() Method
Jquery unbind function takes 2 parameters eventType and handler
You can put your event listener into separate function like this:
var clickEventHandler = function(){
//your logic goes here
}
After you add listener as reference:
jQuery('#toggler').click(clickEventHandler);
And then, later, anytime, anywhere you want you can unbind that specific handler:
jQuery('#toggler').unbind('click', clickEventHandler);
What i used to do in the past is toggle the click behavior using css classes, ex i used to set a click listener on the parent and delegate to all of the children something that jquery is doing now by default i believe. Anyway based on the css class it will trigger an event for ex.
$('.some-parent-element').on(
'click',
'the-behavior-css-class',
function() { // do stuff here.... }
)
Now if you want to remove this behavior you can just toggle the class of the element and it should do the job. ex
$('.some-parent-element').on(
'click',
'hide-me-on-click-or-whatever',
function() {
$(this).toggleClass('hide-me-on-click-or-whatever')
// perform the action
}
)
You can check if the element has the class hidden
Since I started structuring my JavaScript as a module pattern, some of my click events no longer work. Since other parts of my JavaScript add HTML to the DOM, I need to use $('body').on('click') for a button.
This is what my module currently looks like:
var s,
MyApp = {
settings: {
fooButton: $(".foo-button"),
barButton: $(".bar-button")
},
init: function() {
s = this.settings;
this.bindEvents();
},
bindEvents: function() {
// this works
s.fooButton.on("click", function() {
MyApp.clickButton("foo");
});
// this does NOT work
$('body').on('click', s.barButton, function (event) {
MyApp.clickButton("bar");
});
},
clickButton: function(button) {
console.log("You clicked " + button)
}
};
The first click event is working, the second isn't. How can I bind and event for an element that was created by JavaScript code?
The second argument for your handler when the event is delegated is expected to be a string.
In your case it is a jQuery Object.
That is the root cause your click event is not working.
Change
barButton: $(".bar-button")
to
barButton: ".bar-button"
If you're creating the element in JS, you have to bind the event AFTER the element is created.
So put the binding event in a function, then call that function after your JS code has created the element. :)
When using .on() for event delegation, the second parameter has to be a string. Passing anything else won't work.
http://api.jquery.com/on/#on-events-selector-data
I am using a document.getElementById("val").click() to invoke a click event, but it keeps firing multiple times.
Here I add the eventHandler:
try {
//add mousedown event handler to navigation buttons
addEventHandler(oPrevArrow, "mousedown", handlePrevDayClick);
addEventHandler(oNextArrow, "mousedown", handleNextDayClick);
addEventHandler(oLogout, "mousedown", handleLogoutClick);
}
catch (err) {
}
In the click event I am performing a "auto click"
function handleNextDayClick(e) {
e = e || window.event;
stopEvent(e);
document.getElementById("btn_nextday").click();
}
I need help to figure out what is making it call multiple times and a possible fix.
NB: the button that is auto-clicked calls a method in the ASP.NET Code-Behind
Usually when you have an event firing multiple times it is because the event is attached to an element more than once or the element you are auto clicking is a child of another element with the same event attached. Check to see if they are wrapped by each other and if so you will need to detect that the current target is equal to the target to make sure it only happens once. Or you can stop the event propagation.
try hooking it up with JQuery:
$(document).ready(function() {
$('#oPrevArrow').click(function() {
$('#btn_prevday').trigger('click');
});
$('#oNextArrow').click(function() {
$('#btn_nextday').trigger('click');
});
$('#oLogout').click(function() {
$('#btn_logout').trigger('click');
});
});
This could be even more concise, depending on how your arrows and Buttons are laid out in the DOM. Potentially it could be a single line of jQuery.
Something like:
$(document).ready(function() {
$('.arrow').click(function() { //note css class selector
$('this + button').trigger('click');
});
});
It happens due to the particular event is bound multiple times to the same element.
The solution which worked for me is:
Kill all the events attached using .die() method.
And then attach your method listener.
Thus,
$('.arrow').click(function() {
// FUNCTION BODY HERE
}
should be:
$('.arrow').die("click")
$('.arrow').click(function() {
// FUNCTION BODY HERE
}