I don't understand why my function is not working.
It is showing up the login form, but when I blur (click somewhere else than the form) it is not hiding.
here is my buggy code:
$(document).on('click', '#login-btn', function(){
var $form = $("#login");
$form.show("slow" );
$("#login").on('blur', function (){
$form.hide("slow");
});
});
You probably do not want this blur to be handled only when click event gets fired.
Move the blur event out of the click event
var $form = $("#login");
$(document).on('click', '#login-btn', function(){
$form.show("slow" );
$('#loginUsername').focus();
});
$form.on('focusout', function (){
$form.hide("slow");
});
You can do this:
var $form = $("#login");
$(document).on('click', '#login-btn', function () {
$form.show("slow");
}).on('blur', '#login', function () {
$form.hide("slow");
});
Related
So I'm using some parts of gentelella and there is a file custom.js. I have some problems with this file because some parts works and other don't.
The problem is with this method:
$(document).ready(function() {
console.log("custom.js inside document ready");
$('.collapse-link').on('click', function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
It write "custom.js inside document ready" but when I click nothing happened.
And if I look into the HTML I have the same classes as in the JS:
it might be that on document ready these specific elements are not found.
In general a best practice is to delegate the events to the document, like this:
$(document).ready(function() {
console.log("custom.js inside document ready");
$(document).on('click', '.collapse-link' /* <--- notice this */, function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$(document).on('click', '.close-link' /* <--- notice this */, function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
You have written the click event on the a tag. In general functional specific tags like submit button, a tag will do their default functionality on click. So as it is anchor it will check for href which is not there so the it is not redirecting to anywhere. We can supress the default behaviour of these kinds using e.preventDefault(). Here e is the event. So change your function to
$('.collapse-link').on('click', function(e) {
e.preventDefault();
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
And
$('.close-link').on('click', function(e) {
e.preventDefault();
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
How can I temporary disable onclick event until the event is finished?
So far that's all I've come up with:
<script>
function foStuff(a){
//no modifications here to be done, just some code going on
}
$(document).ready(function(){
$("#btn").click(function(){
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){ //when do stuff finishes is what i need to get
obj.prop('onclick',action);
});
});
});
</script>
<div id="btn" onclick="doStuff(500)">
</div>
EDIT:
I've tried it this way: but it doesn't unblock the click event
$("#btn").click(function(){
var obj = $(this);
obj.off('click');
$.when( doStuff(500) ).then( function(){
obj.on('click'); // it actually comes here, but click event is being unset
} );
});
<script>
$(document).ready(function(){});
</script>
<div id="btn">
</div>
Well, you can create a variable that tells your function to ignore it while it's true;
var isIgnore = false;
$("#btn").click(function(){
if(isIgnore)
return;
isIgnore = true;
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){
obj.prop('onclick',action);
isIgnore = false;
});
});
This code is not tested but I think this will work.
Simply reference the handler, and detach it before performing your action, then at the end attach it again ...
$(document).ready(function () {
var handler = function () {
var obj = $(this);
obj.off('click');
whenDoStuffFinishes.(function () {
obj.click(handler);
});
};
$("#btn").click(handler);
});
use pointerEvents.try this:
$("#btn").click(function(){
document.getElementById('btn').style.pointerEvents = 'none';
whenDoStuffFinishes.(function(){
document.getElementById('id').style.pointerEvents = 'auto';
});
});
Using a combination of bind and unbind
https://api.jquery.com/bind/
https://api.jquery.com/unbind/
Turn the event off once it is triggered and reattach it at the end of the callback.
jQuery( '#selector' ).on( 'click', function voodoo( event ) {
jQuery( event.target ).off( event.type );
// Do voodoo...
jQuery( event.target ).on( event.type, voodoo );
});
Alternatively and depending on the scenario, event.stopImmediatePropagation() might also serve as a solution. It will stop all subsequently attached event handlers from firing and itself from bubbling up the DOM tree.
jQuery( '#selector' ).on( 'click', function( event ) {
event.stopImmediatePropagation();
});
The link is in the footer, The problem is: onclick, the page jumps to the header with a # in the address bar, is there a way to stay in the footer ?
here is my code
<span style="color: #33A13D"><i class="fa fa-hand-o-up"></i></span>
$(document).on('click', '.clickIn', function(){
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
Thanks
Use event.preventDefault():
$(document).on('click', '.clickIn', function(e){
e.preventDefault();
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
This cancel default action of browser in specific element. Check reference: http://api.jquery.com/event.preventDefault/
Yo have to modify your handler to add e.preventDefault() and e.stopPropagation():
$(document).on('click', '.clickIn', function(e){
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
This will prevent default action for your link (follow "#" link) and stop the propagation (bubbling) of the click event.
You can prevent the default behaviour of a triggered event by calling the preventDefaultmethod of the event object. I.e.:
$(document).on('click', '.clickIn', function(event){
var $this = $(this);
var liCount = $('#liCount');
// Do this:
event.preventDefault();
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
inside click use
event.preventDefault();
I have a table that is generated by a Kendo Scheduler.
I have to add a click function on each td on document load.
For now, I have tried this:
$(document).ready(function () {
$('td.k-nonwork-hour').click(function () {
alert("Hello");
});
});
For adding a onclick function. I have also tried with onclick
$(document).ready(function () {
$('td.k-nonwork-hour').onclick =function () {
alert("Hello");
};
});
But none of them works. Anyone knows a solution? :)
Better use delegated event instead of attaching event handler to each cell.
e.g.
scheduler.wrapper.on("click", "td.k-nonwork-hour", function() {
alert("Non working day!")
});
Here is live example.
scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function(e) {
var target = $(e.currentTarget);
if (target.hasClass("k-event")) {
var event = scheduler.occurrenceByUid(target.data("uid"));
scheduler.editEvent(event);
} else {
var slot = scheduler.slotByElement(target[0]);
scheduler.addEvent({
start: slot.startDate,
end: slot.endDate
});
}
});
Im trying to make a button so that when I click on it it creates a new button after it then when I click on the next/new button it will create a button after itself but the click event only works on the first button, can you help?
Here is my fiddle = http://jsfiddle.net/hyeFB/
// $(document).ready(function () {
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('.myButton').click(function () {
$(this).after(myDiv);
});
//});
try using on
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('body').on('click', '.myButton',function () {
$(this).after(myDiv);
});
// $(document).ready(function () {
var myDiv = '<div class="myButton">myButton</div>';
$('#c').append(myDiv);
$('.myButton').live(function () {
$(this).after(myDiv);
});
// Or Use delegation
$('body').delegate('.myButton','click',function () {
$(this).after(myDiv);
});
//});
Would do the trick. http://api.jquery.com/live/ for more info.
Note that live is deprecated starting with jquery 1.7, so the above answer is the more correct one for 1.7+