Click event triggering two times - javascript

I am trying to run some function when clicking on the label text but the click event fired two times.
HTML
<label class="label_one">
Label One
<input type="checkbox"/>
</label>
But its not happening if I change the html code like this.
<label for="test" class="label_two">
Label Two
<input type="checkbox"/>
</label>
My script is this:
$('.label_one').click(function(){
console.log('testing');
});
Can anyone explain me why this is happening like this.
My jsfiddle is here check it ones.
https://jsfiddle.net/sureshpattu/hvv6ucu8/3/

It is because of event bubbling.
In general all elements bubble the event to the root of the document whereas the label tag will bubble the event to its child nodes and thats how the input tag is getting ticked when you click the label dom.
So in your case you attached the event handler to label tag so
It calls when label tag gets clicked
event bubbles inside it and checkbox gets selected and checkbox bubbles the event to its parent node that is label tag again hence it is called twice.
To solve this, just attach the event handler to input/checkbox tag it should work fine.

I couldn't reproduce this in the version of chrome that I'm using.
But if you're facing this in some browser, it's likely because -
According to spec, labels containing inputs, and the ones connected to an input via for attribute trigger a click on the associated input when they are clicked.
So in your first case, there are 2 click events:
Actual click on <label>
Click triggered on <input> by the label
The one triggered on <input> will bubble up to <label> and trigger your handler.
In the second case, Since a for attribute is specified and there is no matching input with id of 'test', the additional click is not triggered even if the input is inside the label.

Click on checkbox do click on label. Try use .change event on input
$('.label_one input').change(function(){
var html = '<div class="log_sec_one">Log</div>';
$('.logs').append(html);
});
$('.label_two input').change(function(){
var html = '<div class="log_sec_two">Log</div>';
$('.logs').append(html);
});
DEMO

Move your input outside of your label, and use the for="" attribute.
<label class="label_one" for="checkbox_one">
Label One
</label>
<input type="checkbox" id="checkbox_one" />
<br/><br/>
<label for="checkbox_two" class="label_two">
Label Two
</label>
<input type="checkbox" id="checkbox_two"/>
<div class="logs"></div>
JSFiddle: https://jsfiddle.net/hvv6ucu8/2/

<label for="text" class="label_one">
Label One
<input type="checkbox"/>
</label>
<br/><br/>
<label for="text" class="label_two">
Label Two
<input type="checkbox" name="1"/>
</label>
you forgot to put for attribute in label (label_one). just change that. it will work

Related

How to add event listener to div without tabindex=0?

I have something like this control:
I need to track focus on any element inside this control. If I focus input or If I focus (click) calendar icon, I want to know that focus performed.
My idea is to add click listener on wrapper of input + calendar trigger. It is some div.
Out of the box I can't add focus listener to the div. To achieve this I need to add tabindex=0 to this div. This method will work, but it has one minus.
For example, I have form with many controls. Example code is below:
<div class="container">
<input onfocus="onFocus()" />
<div tabindex="0" onfocus="onFocus()">some div</div>
<div tabindex="0" onfocus="onFocus(event.target)">
<input onfocus="onFocus()" />
</div>
<input onfocus="onFocus()" />
</div>
When I focus first input and start looping through TAB key I want this behavior: focus calendar icon, focus next input, focus next calendar icon etc. But with tabindex=0 I break this behaviour. You can check it in this pen. You can see this broken behaviour after some div block.
Well, I have another option to add listener specifically for input and calendar icon (or any other icon). The problem is I have dynamic amount of icons on each field. And I have to add focus listener for each. Much simpler for me (and another developers) is the way when I have only one focus listener on the top (as I think).
Is it somehow possible to add ability to add focus listener to the div without breaking focus loop (like I shown on the codepen example).
Use element.addEventListener('focusin', handler). focus and blur don't bubble, focusin and focusout do.
document.querySelector('.container')
.addEventListener('focusin', function(event) {
console.log(event.target)
})
<div class="container">
<input name="a" />
<div contenteditable="true">some div</div>
<div>
<input name="b" />
</div>
<input name="c"/>
</div>

Angular Js - formating label when inner radio input is checked

I'm dealing with this case where I have a label tag wraps around the radio input button, something like:
<label>
<input type="radio" ng-model="question.value" value="{{option.value}}">
</label>
The label tag is the one that gets formatted for view while the radio button is hidden. When ng-model == value, a certain radio button gets checked automatically and this is happening in my app, no problem at all.
The problem is, I want to format the label tag when this happens. Normally the label is formatted by an onclick event, but this is not an event so I'm not sure how I would solve this in JavaScript. CSS styling is not an option because it can't select parent element.
use ng-class
<label ng-class="{'class-name':question.value==option.value">
<input type="radio" ng-model="question.value" value="{{option.value}}">
</label>
in CSS
.class-name{
color:green;
}

Is there a maximum number of elements I can bind a jquery event to?

I'm building a simple 1 page app that allows someone to curate a list of json feeds. I'm running into an issue with trying to bind a mouseenter/mouseleave event to all the inputs on the page with a given class. Simply, put the first works and the second does not.
I have to following jquery:
$(".feed").on("mouseenter", ".publish", function(){
console.log("feed")
}); //this is for test purposes
$(".feed").on("mouseenter", ".keys-input", function(){
console.log($(this));
$(this).siblings(".delete").fadeIn(75);
});
$(".feed").on("mouseleave", ".keys-input", function(){
$(this).siblings(".delete").fadeOut(75);
});
and the following html:
<div class="feed"><!-- sorry for the confusion -->
<div class="feed-header">
<h2>pga-2013.json</h2>
<button class="publish button-white-bg button-save">Publish</button>
</div>
<div class="kvRow collapsed">
<span class="delete icon">x</span>
<input type="text" class="keys-input" value="free" disabled=""/>
<input type="text" class="values-input" value="0" disabled=""/>
</div>
</div>
The reason I ask if there is a max number of elements you can bind to is because the ".feed" event triggers and there are only 11 of them on the dom whereas the ".keys-input" event does not and there are 7266 of them on the dom. Either that or I'm blind and doing something dumb...
here's a fiddle with fewer elements but the same code that works http://jsfiddle.net/khLPc/
this is the issue: Event on a disabled input the inputs are disabled so they won't fire events which is bananas to me...
The event is not triggered on the disabled element.
Enable the input and it will work.
Check here, I've enabled one of the input fields:
http://jsfiddle.net/balintbako/khLPc/1
Apparently I have to include some code too:
<input type="text" class="keys-input" value="free"/>

Checkbox RadioButton behaviour

I'm trying to implement bootstrap theme into new style for OpenLayers Layer Switcher control.
In bootstrap examples,I have noticed that input elements are nested within label elements like this:
<label class="radio span2">
<input type="radio" value="option1">
Cash
</label>
<label class="radio span2">
<input type="radio" value="option2">
Invoice
</label>
<label class="radio span2">
<input type="radio" value="option3">
Discover
</label>
It seems that when you click on the label of a radio button, it gets checked but not triggered. But when you click on the radio itself, it does get triggered. The same thing happens with checkboxes.But even if checkboxes are hit checked,click event is not triggered this time.
You can check out the code here
How can I solve this ?
You have registered a click event handler for your controls. If you don't click on a control the handler will not be called.
When a label is associated with an element, then a click on it will 'activate' the element. In case of a checkbox or radio button this means check / checked it.
Checkboxes can also be changed by other means, e.g. keyboard. So a click event handler is not the best choice. Use the change event instead.

HTML checkbox onclick called in Javascript

I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.

Categories

Resources