CODEWITHSUNDEEP
javascriptjquery
Mohan
Mohan

Reputation: 4829

Why onclick is being triggered twice?

This is a small piece of code on which I have been working:

All I want is to add an active class to label on click of the same element and leave the default behavior same.

I don't know why is the click event being triggered twice ??

$('label.add-to-favourite').click(function(e){
  alert("here");
  $(this).toggleClass('active');
});
.add-to-favourite span{
    cursor: pointer;
    color: #d2d6de;
}


.add-to-favourite:hover span, .add-to-favourite.active span {
    color: #CB3D3D;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<ul>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" name="favourites[]" value="1">
    </label>
  </li>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" name="favourites[]" value="2">
    </label>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 6

Views: 3529

Answers (7)

Jai
Jai

Reputation: 74738

I don't know why is the click event being triggered twice ??

Well, I would say that label element is the parent element of the checkbox, So there is a connection between them. When you click the label click happens on checkbox too and event bubbles up, so causes in two alerts.

Either take the checkbox out of label or same then can be achieved though css only.

An example with little structure change.

$('label.add-to-favourite').click(function(e) {
  alert("here");
  $(this).toggleClass('active').siblings(':checkbox').prop('checked', $(this).hasClass('active'))
});
.add-to-favourite span {
  cursor: pointer;
  color: #d2d6de;
}
.add-to-favourite:hover span,
.add-to-favourite.active span {
  color: #CB3D3D;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
    </label>
    <input type="checkbox" name="favourites[]" value="1">

  </li>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
    </label>
    <input type="checkbox" name="favourites[]" value="2">

  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

A CSS only solution.

li{overflow:auto;}
.add-to-favourite span {
  cursor: pointer;
  color: #d2d6de;
  float:left;
}
.add-to-favourite input[type="checkbox"]{
    margin-top:15px;
}
.add-to-favourite:hover span,
.add-to-favourite input[type="checkbox"]:checked + span{
  color: #CB3D3D;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul>
  <li>
    <label class="add-to-favourite">
      <input type="checkbox" name="favourites[]" value="1">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
    </label>
  </li>
  <li>
    <label class="add-to-favourite">
      <input type="checkbox" name="favourites[]" value="2">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
    </label>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

localhost
localhost

Reputation: 513

Just define the target element type and this will work fine

$('label.add-to-favourite').click(function(e){

 if(e.target.type=='checkbox'){
     alert("here");
     $(this).toggleClass('active');
   }

});
.add-to-favourite span{
    cursor: pointer;
    color: #d2d6de;
}


.add-to-favourite:hover span, .add-to-favourite.active span {
    color: #CB3D3D;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<ul>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" name="favourites[]" value="1">
    </label>
  </li>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" name="favourites[]" value="2">
    </label>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 4

Mindaugas M.
Mindaugas M.

Reputation: 121

You can try this code:

$('label.add-to-favourite').click(function(e){
    e.preventDefault();
    var $check = $(':checkbox', this);
    $check.prop('checked', !$check.prop('checked'));
    alert("here");
    $(this).toggleClass('active');
});

It will add class and also checks checkbox.

Example: https://jsfiddle.net/Mindaugas/71sefdhp/

Upvotes: 1

WalksAway
WalksAway

Reputation: 2819

When you click on the label, it triggers the checkbox`s click event.

But clicking on a label also automatically sends a click event to the associated input element, so this is treated as a click on the checkbox. Then event bubbling causes that click event to be triggered on the containing element, which is the label, so your handler is run again.

put the checkbox outside the label like so

<label></label>
<input type="checkbox">

UPDATE : you can also do as @Rejith R Krishnan suggested and set the click event handler on the checkbox and not the label

Upvotes: 5

Keshav
Keshav

Reputation: 831

This is the case of event propagation.Try this

$('label.add-to-favourite').click(function(e){
  alert("here");
  $(this).toggleClass('active');
 e.preventDefault();
});

Upvotes: 0

rrk
rrk

Reputation: 15846

Remove the binding for the click and add change event binding to checkbox.

$('label.add-to-favourite :checkbox').change(function(e){
  alert("here");
  $(this).toggleClass('active');
});
.add-to-favourite span{
    cursor: pointer;
    color: #d2d6de;
}
.add-to-favourite:hover span, .add-to-favourite.active span {
    color: #CB3D3D;
}
.hide{display:none;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<ul>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" class="hide" name="favourites[]" value="1">
    </label>
  </li>
  <li>
    <label class="add-to-favourite">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-heart fa-stack-1x fa-inverse"  title="Add to Favourites" data-toggle="tooltip"></i>
      </span>
      <input type="checkbox" class="hide" name="favourites[]" value="2">
    </label>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Gulmuhammad Akbari
Gulmuhammad Akbari

Reputation: 2036

Remove the alert as well.

$('label.add-to-favourite').on("click",function(e){
  $(this).toggleClass('active');
});

Upvotes: -2

Related Questions