0

Такой вопрос, я вешаю слушатель на собитие click по тегу <label> и при клике это событие происходит 2 раза, в чем может быть причина?

$(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>

суть задачи в том, что у меня есть набор чекбоксов, и мне нужно запретить чекать очередной чекбокс, если уже чекнуто 10 чекбоксов

2 ответа 2

1

Ну если вдруг элементы добавлены динамически, то ваш способ лучше для навешивания событий.
Клик по лейблу спускает событие до инпута.
Вешайте на input

$(document).on( 'click', '.company-advs__item [type=checkbox]', function() {
    var count = countSelectedAdvantages();

    console.log(count);

    if( count  >= 3) {
        return false;
    }
});
1

Делайте вот так, видимо так отрабатывает объект label при клике. Ведь label ссылается на другой объект,и видимо инициализирует click на input к которому-он привязан. Отмените просто станд. действие для элемента input.

$('.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>

Или как вариант можно ещё такую вот проверочку влепить

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

2
  • Можете объяснить в чем разница? Я понимаю что такое делегирование, но не совсем понимаю почему событие происходит 2 раза... 10 июл 2018 в 9:55
  • @АнатолийШевелев обновил ответ. Чуть в другом трабла
    – EVG
    10 июл 2018 в 10:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.