Such a question, I hang the listener to see a click on the <label> and when clicked this event occurs 2 times, what could be the reason?

 $(document).on( 'click', '.company-advs__item', function() { var count = countSelectedAdvantages(); console.log(count); if( count >= 10) { return false; } }); function countSelectedAdvantages() { return $('#profile-form-advs .company-advs__item input:checked').length; }, 
 <div class="company-advs profile-form__advs" id="profile-form-advs"> <label class="company-advs__item"> <input type="checkbox" name="advant_id"/> <div class="company-advs__bg"> <div class="company-advs__ico"></div> </div> <div class="company-advs__name">какой-то текст</div> </label> <label class="company-advs__item"> <input type="checkbox" name="advant_id"/> <div class="company-advs__bg"> <div class="company-advs__ico"></div> </div> <div class="company-advs__name">какой-то текст</div> </label> <label class="company-advs__item"> <input type="checkbox" name="advant_id"/> <div class="company-advs__bg"> <div class="company-advs__ico"></div> </div> <div class="company-advs__name">какой-то текст</div> </label> <label class="company-advs__item"> <input type="checkbox" name="advant_id"/> <div class="company-advs__bg"> <div class="company-advs__ico"></div> </div> <div class="company-advs__name">какой-то текст</div> </label> </div>

The essence of the problem is that I have a set of checkboxes, and I need to prohibit the checkout of the next checkbox, if 10 checkboxes are already checked

    2 answers 2

    Well, if all of a sudden elements are added dynamically, then your method is better for hanging events.
    A click on the label brings the event down to the input.
    Hang on input

     $(document).on( 'click', '.company-advs__item [type=checkbox]', function() { var count = countSelectedAdvantages(); console.log(count); if( count >= 3) { return false; } });

      Do this like this, apparently doing so with the label object when clicked. After all, label refers to another object, and apparently initializes a click on the input to which it is attached. Cancel just stand. action for the input element.

       $('.company-advs__item').on( 'click', function() { var count = countSelectedAdvantages(); console.log(count); if( count >= 10) { return false; } }); $('.company-advs__item input').click(function(){return false}) 
       <div class="company-advs profile-form__advs" id="profile-form-advs"> {foreach from=$Advantages item=Advant} <label class="company-advs__item"> <input type="checkbox" name="advant_id" value="{$Advant.id}"/> <div class="company-advs__bg"> <div class="company-advs__ico company-advs__ico_{$Advant.id}"></div> </div> <div class="company-advs__name">{$Advant.advant_label}</div> </label> {/foreach} </div>

      Or as an option you can still such a check here

       $(function(){ $(document).on('click','.company-advs__item',function(e){ e.target.tagName == 'LABEL' ? console.log('отработало') : '' })

      • Can you explain the difference? I understand what delegation is, but I don’t quite understand why the event happens 2 times ... - Anatoly Shevelev
      • @AnatolyShevelev updated the answer. Slightly different Trouble - EVG