Why is checkbox changed twice? - javascript

I do this:
$("input[type='checkbox']").each(function() {
var current = $(this);
$("label[for='" + current.attr("id") + "']").on('click', function() {
current.change();
alert('1');
});
});
$("input[type='checkbox']").on("change", function() {
alert('2');
});
Now, when I click on the label, the checkbox first alert(1) is showing up once, but the second(2) showing up twice. Can you tell me why? (The checkbox is hidden, seems like the change happens twice somehow)

You don't have to add a separate event handler for the <label> tag. It will trigger the "click" on the <input>.
You're better off using "click" instead of "change" (especially with the newest jQuery). Old (perhaps new) IE versions don't trigger "change" on checkboxes until the focus changes.
edit the reason that the newest jQuery makes life better is that it fixes a long-standing bizarre "feature" of the library. Previously, programmatically triggering "click" would result in a call to any "click" handlers with the element in the state before the effect of the click took place. That is, if you call
$(myCheckbox).trigger("click");
and the element was checked, it would be checked in the call to the handler. However, when a real click happens, the browser flips the state of the "checked" attribute before calling handlers. That made life pretty weird, but as of 1.9 I'm pretty sure that's fixed.

Related

Javascript check box is checked issue with trigger

In my javascript file code is
$( document ).ready(function() {
$("input:checkbox[id^='chkbox_']").on('click',function(){
var chkbox = $(this);
if(chkbox.is(':checked')){
alert('In if');
} else {
alert('In else');
}
});
$("#" + id).trigger('click');
});
This code gives me In else .
I don't understand why and what is the solution for this
EDIT: This answer seems to only apply to versions before 1.9 or so, when the "bug" seems to have been fixed.
I've been struck by this problem too. The reason is that when you actually click the checkbox with your mouse, its state is set first and then its click handlers are executed. If you trigger the click using jQuery, the click handlers are executed first and the state set afterwards.
One solution is to trigger the native javascript click handler like this: checkbox[0].click(), which does the same as jQuery's .click()/.trigger('click') but in the right order.
Another is to do checkbox.attr('checked', true).triggerHandler('click'), where the status is set first and triggerHandler() only executes the handler and not the default behavior (checking the box).
Both solutions should allow your code to work regardless of if the click was real or triggered.
It might be your jquery library issue. or browser issue. Its working fine for me. You can you latest jquery above 1.8.
click to view answerhttp://jsfiddle.net/dy4uzn51/2/

Why does not self focus work in JavaScript?

Whenever a blur event is triggered from any input element, I want to set focus to one particular element.
This issue arises when I am trying to focus to the same element triggering the blur event.
Why does this only works, when the element I am trying to focus on to, is not the one triggering the event?
[Issue Illustration]
and explanation as per the fiddle:
The element I am trying to focus to is col0
Unless the element to trigger the blur event is not col0 it works perfect
But when blur is triggered from col0 itself, then $("#col0").focus() does not work.
Q: Why? & What is the workaround/solution?
P.S: I am just trying to know the cause of the behavior and ways to overcome it. Concerns about the usability, is NOT THE QUESTION.
This works in FF for me...
$('input').on('blur', function() {
setTimeout(function () { $("#col0").focus(); }, 0);
});
it is just to postpone a UI action a bit (after processing the blur event is finished).
Warning: in jsfiddle FF won't let you edit the code after you try it, once you get to the input you are stuck there until refresh
Update: The explanation is tricky, as it is a matter of implementation in FF (as Chrome and IE behave as you expected), my guess is that FF prevents firing related events when you are in the event handler for the same element (a thing that may potentially lead to infinite cycle), using setTimeout you are firing the event soon after you leave the handler (and even UI has a chance to redraw itself)
It looks like you're trying to keep focus on everything except the control you're on. Try this:
$('input:not(#idofcontrol)').blur(function() {
$('#idofcontrol').focus();
});

JQuery: Event handler unbound after ussing .toggle()

I have a select element which I have bound to the change event as follows:
$("#selectId").on("change", handler);
I've also tried this with .bind() and .change(), and everything works as expected. The select itself is inside a div that is hidden/shown when the user clicks on it, by means of the .toggle() method. The problem is that when the div is hidden and then shown again, the change event no longer triggers when it should. I can fix this by binding the event again, but I want to know whether this is normal behavior or a bug in JQuery (1.7.1) (or otherwise an error in my code).
Has anyone else had this problem before?
EDIT
This is the code that hides the div:
$('.accordion .accordionHeader').click(function()
{
if ($(this).next().is(":visible"))
{
$("#mainForm").data("validator").reset();
$(this).removeClass("expandedHeader");
$(this).find("em").removeClass("expandedHeader");
}
else
{
$(this).addClass("expandedHeader");
$(this).find("em").addClass("expandedHeader");
}
$(this).next().toggle('fast');
return false;
})

How do I force a blur event to occur in JavaScript?

Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline select and when I make changes (click on elements), it does not change until the select box loses focus. So I'm trying to force a blur every time the select box is clicked. That way if it changes, it will trigger the changed event. If it doesn't change, nothing will happen.
How do I do this? Am I even approaching this the right way? Jquery answers are okay as well.
In addition to Ender the full code could be something like this.
$('#mySelectBox').change(function() {
$('#thingToBlur').blur();
})
Reference: http://api.jquery.com/blur/
This will find the element with the focus and trigger the blur event.
function blur(){
document.querySelectorAll('input,textarea').forEach(function(element){
if(element === document.activeElement) {
return element.blur();
}
});
}
Using jQuery do:
$('#mySelectBox').change(function() {
//do things here
});
According to the documentation at http://api.jquery.com/change/, the event is triggered immediately when the user makes a selection.
Check out this demo to verify that this works: http://jsfiddle.net/AHM8j/
You could attach an onclick handler to the select and the individual options. basically onclick="this.blur();". I've always found that click events on <select> elements to be a pain, as nothing happens at the point you expect it to.
Okay, Here's what was going on. I was including the -vsdoc version of JQuery instead of the actual JQuery library. This also fixes some issues I was having with some plugins such as blockUI.

How to programmatically click an element with MooTools?

In jQuery, I've done stuff like this in the past:
$('#someCheckbox').click();
And everything works as if the user just clicked on the element normally.
However the same doesn't work in MooTools:
$('someCheckbox').fireEvent('click');
The checkbox doesn't get checked, nor do any of the bound event handlers fire.
Is there a way to do this?
I need the already bound "click" event handlers to fire, so just setting it's "checked" attribute isn't an option.
The click event should fire when fireEvent('click') is called. See http://mootools.net/shell/8bbgn/ for a demo I just set up.
The checkbox doesn't get checked, as expected. To do this, you must set the checked property to true:
$('someCheckbox').setProperty('checked', true);

Categories

Resources