JQuery - слишком много рекурсии

Question

Код ниже не работает и возвращает ошибку рекурсии.Я просмотрел несколько других постов здесь и увидел один конкретный (/560853/oshibka-slishkom-mnogo-rekursii-v-jquery-1-3-2) Я думал, что это поможет мне, и я скорректировал свой код, но думаю, что я не понимаю принцип, потому что я все еще получаю ошибку...

//Note - can't use radios... must use checkboxes

$('div.divCheck').click(function() {
       var testEv = $(this).find('input').attr("id");
       $(this).children('div').toggleClass('selected');
       $("input#"+testEv).click();
});

HTML:

<div class="divCheck clearfix">
   <div class="checkboxArea1 unselected">
        <input type="checkbox" id="pqrs">
        <label class="filterlabel pqrCheckbox">PQR</label>
   </div>
</div>

Answer 1

Вы столкнулись с пузырями событий. У вас уже есть функция, связанная с событием щелчка CheckBox? Похоже, что событие click для CheckBox всплывает обратно в div, который его содержит, что вызывает круговую рекурсию. Я бы хотел изменить последнюю строку обработчика щелчков div на что-то вроде $('input#' + testEv).attr('checked', 'checked');. Вы также можете использовать StopPropagation в обработчике кликов для CheckBox.

Answer 2

Если вы просто пытаетесь установить флажок, вы можете использовать функцию jQuery prop.

$('div.divCheck').click(function() {
       var testEv = $(this).find('input').attr("id");
       $(this).children('div').toggleClass('selected');
       var $elm = $("input#"+testEv);
       $elm.prop('checked', !$elm.prop('checked'));
});

См. Скрипку

Answer 3

Я считаю, что проблема в том, что событие click распространяется по дереву DOM, и поэтому обработчик события click вызывает сам себя, вызывая ошибку. Попробуйте это:

$('div.divCheck').click(function(e) {
   var testEv = $(this).find('input').attr("id");
   $(this).children('div').toggleClass('selected');
   $("input#"+testEv).click();
   e.stopPropagation();
});