CODEWITHSUNDEEP
jquery
unsafePtr
unsafePtr

Reputation: 1763

Why jquery onclick does call action twice

I try to add onclick action over element. But its action was called twice. Where is the problem? I will just give a simple example:

$('#categories').on('click', '.category', function () {
	console.log('why is called twice???');
});
<form name="categories" id="categories">
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>All</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>some</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>other</label>
</form>


<script
			  src="https://code.jquery.com/jquery-3.1.0.js"
			  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
			  crossorigin="anonymous"></script>

Upvotes: 1

Views: 132

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074088

Because when you click the label of a radio button (or checkbox), the click event is fired on the label (of course), and also fired on the radio button. Since click bubbles, your handler sees the click both from label and from the radio button.

You can see that by logging the e.target.tagName:

$('#categories').on('click', '.category', function (e) {
	console.log('Click on: ' + e.target.tagName);
});
<form name="categories" id="categories">
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>All</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>some</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>other</label>
</form>


<script
			  src="https://code.jquery.com/jquery-3.1.0.js"
			  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
			  crossorigin="anonymous"></script>

As you can see, if you click the label, you see

Click on: LABEL
Click on: INPUT

But if you just click the radio button itself (the circle), you only see

Click on: INPUT

So you may want to only watch for clicks on the radio button, since you'll get those even if it's just the label that was clicked:

$('#categories').on('click', '.category > input', function (e) {
  console.log('Click on: ' + e.target.tagName);
});


$('#categories').on('click', '.category > input', function (e) {
  console.log('Click on: ' + e.target.tagName);
});
<form name="categories" id="categories">
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>All</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>some</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>other</label>
</form>


<script
			  src="https://code.jquery.com/jquery-3.1.0.js"
			  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
			  crossorigin="anonymous"></script>

Upvotes: 3

MohammadReza Mahmoudi
MohammadReza Mahmoudi

Reputation: 1324

Just use it like this:

$('#categories').on('click', 'input[name="categories"]', function () {
    console.log('why is called twice???');
});

You was calling the click on label, and label triggers the focus on input too.

Upvotes: 2

Related Questions