I was trying to execute some alerts with some onclick events and conditions with jquery statement. But it seems that event handlers don't work properly, probably due the fact that is missing something in my event handling logic. I have just 1 button, with id #bottone1, and I have some menu buttons with id #b1 and #b2.
The first event works fine, it adds correctly the class "cliccatoInvoca1_OnReady". When i click on #bottone1 it starts the the first alert "cliccatoInvoca1_OnReady". Also the onClick event $("#b1") works properly, it removes the class "cliccatoInvoca1_OnReady" and replaces with the class "cliccatoInvoca1".
This point i encounter the first problem
When i click on #bottone1 it comes like first alert "cliccatoInvoca1_OnReady", and then "cliccatoInvoca1". Then when i click on #b2 and afer that i click on #bottone1 it executes 3 alerts, "cliccatoInvoca1_OnReady", "cliccatoInvoca1" and finally "cliccatoInvoca3".
So, the main problem is that it doesn't work if condition for execute only 1 alert at time. So when i click on #bottone1 it executes all the alerts in sequence.
This is my document.ready function
$(document).ready(function () {
$("#select-1").multiselect();
invoca1();
$("#bottone1").addClass("cliccatoInvoca1_OnReady btn btn-default");
if ($("#bottone1").hasClass("cliccatoInvoca1_OnReady")) {
$("#bottone1").click(function () {
alert("cliccatoInvoca1_OnReady");
keys = [];
$('input[name="multiselect_select-1"]:checked').each(function () {
keys.push(this.value);
});
});
}
$("#b1").click(function () {
invoca1();
$("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
if ($("#bottone1").hasClass("cliccatoInvoca1")) {
$("#bottone1").click(function () {
alert("cliccatoInvoca1");
keys = [];
$('input[name="multiselect_select-1"]:checked').each(function () {
keys.push(this.value);
});
});
}
});
$("#b2").click(function () {
invoca3();
$("#bottone1").removeClass("cliccatoInvoca1").addClass("cliccatoInvoca3");
if ($("#bottone1").hasClass("cliccatoInvoca3")) {
$("#bottone1").click(function () {
alert("cliccatoInvoca3");
keys = [];
$('input[name="multiselect_select-1"]:checked').each(function () {
keys.push(this.value);
});
});
}
});
});
Change to use delegated event handlers, attached to a non-changing ancestor element, each with a matching selector:
e.g. like this:
$(document).on('click', "#bottone1.cliccatoInvoca1_OnReady", function() {
alert("cliccatoInvoca1_OnReady");
keys = [];
$('input[name="multiselect_select-1"]:checked').each(function () {
keys.push(this.value);
});
});
The above is now all you need for one click handler, repeat the pattern for the other classes it can have. You never need the hasClass checks.
Your other code just becomes simple like this:
$("#b1").click(function () {
invoca1();
$("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
});
Delegated handlers:
Delegated event handlers work by listening for the event (in this case click) to bubble up to the ancestor element.
You normally choose the closest non-changing ancestor element, but document is the default if nothing else is closer/convenient. Do not use 'body' as it has a bug related to styling that can cause mouse events not to bubble to it.
Then it applies the jQuery selector to only the elements in the bubble-chain.
It then applies the function, only to the matching elements that caused the event.
The result is the elements only need to match at event time and not event registration time.
This pattern will simplify your code significantly.
The entire example will become something like this:
$(document).ready(function () {
$("#select-1").multiselect();
invoca1();
$("#bottone1").addClass("cliccatoInvoca1_OnReady btn btn-default");
$("#b1").click(function () {
invoca1();
$("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
});
$("#b2").click(function () {
invoca3();
$("#bottone1").removeClass("cliccatoInvoca1").addClass("cliccatoInvoca3");
});
$(document).on('click', "#bottone1.cliccatoInvoca1", function () {
alert("cliccatoInvoca1");
keys = [];
$('input[name="multiselect_select-1"]:checked').each(function () {
keys.push(this.value);
});
});
$(document).on('click', "#bottone1.cliccatoInvoca3", function () {
alert("cliccatoInvoca3");
keys = [];
$('input[name="multiselect_select-1"]:checked').each(function () {
keys.push(this.value);
});
});
});
Notes:
I am ignoring the fact that your event handlers contain identical code and assume the real code has different operations.
Related
I've an element with two handler bound to it:
<button class="pippo pluto">
push me
</button>
$('.pippo').on('click', function () {
alert("pippo");
});
$('.pluto').on('click', function () {
alert("pluto");
});
I'm trying to .off() only one of them, but the syntax eludes me :-( I'm trying with something among the line of..
<button class="dai">
remove
</button>
$('.dai').on('click', function () {
$('.pippo').off('click');
alert("ok, removed");
});
but this removes both the handler. So I'm trying with...
$('.pippo').off('click .pippo');
but then nothing gets removed.
So I removed the middle space:
$('.pippo').off('click .pippo');
but back to square 1: both handler gets removed.
The right syntax would then be... ?
https://jsfiddle.net/6hm00xxv/
The .off(); method allows you to target multiple selectors as well as a specific event.
$('.pippo').off() would remove all events for the .pippo selector.
$('.pippo').off('click') would remove all click events for the .pippo selector.
$('.pippo').off('click', handler) would remove all click events with that handler for the .pippo selector.
In your case the handler used to add the event listener was an anonymous function so the handlercannot be used in the off() method to turn off that event.
That leaves you with three options, either use a variable, use a namespace or both.
Its quite simple to figure out which one to use.
if( "The same handler is needed more than once" ){
// you should assign it to a variable,
} else {
// use an anonymous function.
}
if ( "I intent to turn off the event" && ( "The handler is an anonymous function" || "I want to turn off multiple listeners for this selector at once" ) ){
// use a namespace
}
In your case
your handler is only used once so your handler should be an anonymous function.
you wish to turn off the event and your handler is anonymous so use a namespace.
So it would look like this
$('.pippo').on('click.group1', function () {
alert("pippo");
});
$('.dai').on('click', function () {
$('.pippo').off('click.group1');
alert("ok, removed");
});
It would work just as well to assign you handler to a variable if you prefer.
This allows you to specify which selector, eventType and handler to remove.
var pippo_click = function (e) {
alert("pippo");
});
$('.dai').on('click', function () {
$('.pippo').off('click', pippo_click);
alert("ok, removed");
});
But as a rule you shouldn't create variables if they're not needed.
One easier alternative with jQuery is to define a namespace for your click events:
$('.pippo').on('click.first', ...);
$('.pluto').on('click.second', ...);
// Remove only the pippo listener
$('.pippo').off('click.first');
Note that your classes pippo and pluto refer to the same element so using one or the other will not change anything.
https://jsfiddle.net/6hm00xxv/2/
Ok, solved. I just had to bind the handler to document:
function showMsg(text) {
alert("showMsg called with text: " + text);
};
$(document).on('click', '.pippo', function () {
showMsg("pippo");
});
$(document).on('click', '.pluto', function () {
showMsg("pluto");
});
$('.dai').on('click', function () {
$(document).off('click', '.pippo');
alert("ok, removed");
});
https://jsfiddle.net/6hm00xxv/1/
Because you are calling .off for click event. It is removing all possible click events on that selected element. The trick is to define a handler and remove that particular handler only.
function showPluto() {
showMsg("pluto");
};
function showPippo() {
showMsg("pippo");
};
function showMsg(text) {
alert("showMsg called with text: " + text);
};
$('.pippo').on('click', showPippo);
$('.pluto').on('click', showPluto);
$('.dai').on('click', function() {
$('.pippo').off('click', showPippo);
alert("ok, removed");
});
How can I turn an on('click') event back on after I apply event off()?
$('#btn-aluno').on('click', function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').off();
});
$('#btn-familiar').on('click', function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').off();
});
new-step-email-familiar and new-step-email-aluno = <input>
btn-aluno and btn-familiar = <span> (used as a button)
Instead of turning off the event listener, you could do the same thing by using event delegation,
$(document).on('click',"#btn-aluno.active", function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').removeClass("active");
});
$(document).on('click',"#btn-familiar.active", function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').removeClass("active");
});
And whenever you want to activate the event listeners, just add the class active to the relevant elements. Also in the place of document try to use any closest static parent of the element on which the event gonna be bound.
As per your requirement, you have edit your logic like below,
$(document).on('click',"#btn-aluno.active", function() {
$('.new-step-email-aluno').toggle();
$('#btn-familiar').toggleClass("active");
});
$(document).on('click',"#btn-familiar.active", function() {
$('.new-step-email-familiar').toggle();
$('#btn-aluno').toggleClass("active");
});
DEMO
I am trying to get an onblur/onfocus combination working for a pair of text boxes which I am selecting via class in jquery. I am not getting any errors in debug, but the blur function never seems to be called. When debugging my breakpoint in the blur function is not hit.
$(document).ready(function () {
var row = $(this).closest('tr');
$('.editClass').click(function () {
var editBoxes = $(row).find('.editClass');
var focus = 0;
$(editBoxes).focus(function () { focus++ });
$(editBoxes).blur(function () {
focus--;
setTimeout(function () {
if (!focus) {
alert('LOST FOCUS'); // both lost focus
}
}, 50);
});
});
});
Pretty sure the problem here was that the editBoxes were dynamically added to the page. This was not apparent in my question. Since they were dyncamically added I need to use
$(document).on('blur', '.editBoxes', function (){
...
}
The last two lines of your code example should be this
});
});
This is needed for closing the ready and click function call.
Another possible problem is that you wrap the focus and blur listeners in a click handlers. Why did you do this?
I've searched for equal questions, but found not a single one for my specific case.
I have an element
<span id="myButton">Click</span>
and a jQuery post-request bound to it
$(document).ready( function()
{
$(document).on( 'click', '#myButton', function(e)
{
$.post( "RESPONDING_WEBPAGE_HERE.php" ).done( function( result )
{
console.log( result );
});
});
});
Now, for every time you click the button, it makes a post-request. Makes sense. What I want is a good solution for only executing the post-request, if the result function (.done()) is executed.
For sure, I know to handle that with a variable like var isAjaxRequest = false; setting it to true, and back to false in the resulting function, but maybe there is a better (jQuery build-in) way of doing it.
Here is my solution by now. I would be really great if there are better ones.
var isAjaxRequest = false;
$(document).ready( function()
{
$(document).on( 'click', '#myButton', function(e)
{
if( !isAjaxRequest )
{
isAjaxRequest = true;
$.post( "RESPONDING_WEBPAGE_HERE.php" ).done( function( result )
{
isAjaxRequest = false;
console.log( result );
});
}
});
});
Thank you =)
I commonly set the button to disabled when it is clicked and then remove the disabled attribute on the callbacks for the POST request.
$(document).on('click', '#button', function () {
$('#button').attr('disabled', true);
$.post('something').done(function () {
$('#button').removeAttr('disabled');
}).fail(function () {
$('#button').removeAttr('disabled');
});
});
This will prevent the button from being clicked again once it has already been clicked.
As per the comments; If you want this behaviour on a span element or others which don't allow the disabled attribute, you could set a class when clicked.
$(document).on('click', 'span#button:not(.disabled)', function () {
$(this).addClass('disabled');
$.post('something').done(function () {
$(this).removeClass('disabled');
}).fail(function () {
$(this).removeClass('disabled');
});
});
The above code will make sure the element can only be clicked if it doesn't have the disabled class. This will also work for the button elements so there is no need to duplicate code for both methods.
I like to use .one() to attach the event handler and re-attach the event after the ajax call is complete. This will handle all cases even when your target doesn't support disabling:
//define handler function
var myButtonHandler = function(e) {
$.post("RESPONDING_WEBPAGE_HERE.php").done(function() {
attachButtonHandler("#mybutton"); //re-attach the click event after AJAX complete
});
}
//attach an event handler that's only good for one click
function attachButtonHandler(selector) {
$(document).one('click', selector, myButtonHandler);
}
//on doc ready, attach the event handler for the first time
$(function() {
attachButtonHandler("#mybutton");
});
I need to bind click event for a anchor tag which is created dynamically.
Example:
$.fn.ccfn = function(){
$(".alreadyavailabledom").click(function(){
$("<a class="dynamicallycreated"></a>");
})
//i am trying like below, but not working
$(".dynamicallycreated").click(function(){
alert("not getting alert why?")
})
}
It is written as a plugin code, i tried with on, live etc. Not working.
you should use event delegation for that
$(document).on("click",".alreadyavailabledom",function(){
//some operation
});
It helps you to attach handlers for the future elements
Use event delegation
$(document).on('click','.dynamicallycreated',function(){
alert("not getting alert why?")
})
or bind the click when creating element
$.fn.ccfn = function () {
$(".alreadyavailabledom").click(function () {
$('<a>', {
html: "anchor",
class: "dynamicallycreated",
click: function () {
alert("clicked anchor");
}
}).appendTo('#myElement');
})
}