jQuery атрибут данных обновляется только после второго клика

Question

У меня есть jquery код, который должен печатать все выбранные флажки:

$('.engagement-type').on('click', function () {
    var engagementTypes = $('.engagement-type').parent().find('[data-checkbox="checked"]');
    console.log(engagementTypes);
});

12 флажков находятся в таблице:

<td>
    <input name="EngagementTypes[0].EngagementTypeId" 
      id="EngagementTypes_0__EngagementTypeId" 
      type="hidden" value="1" data-val-required="The Engagement field is required." 
      data-val="true" data-val-number="The field Engagement must be a number.">

    <span class="pull-left">
        <div class="engagement-type" data-checkbox="checked">
            <input name="EngagementTypes[0].IsSelected" 
              id="EngagementTypes_0__IsSelected" type="checkbox" value="true" 
              data-val-required="The IsSelected field is required." 
              data-val="true">
            <input name="EngagementTypes[0].IsSelected" type="hidden" value="false">
        </div>
    </span>
    Audit
</td>

После первого нажатия на флажок я получаю пустой список выбранных типов взаимодействия. Первый флажок появляется только после того, как установлен второй флажок. Почему это так?

Answer 1

Как упомянул @TJ Crowder, должен быть дополнительный код, который вы не предоставили. По крайней мере, часть, которая установит data-checkbox = флажок.

Я бы предположил использовать само состояние флажка, например:

$('.engagement-type').on('click', function () {

    var engagementTypesChecked = $('.engagement-type').parent().find('input[type="checkbox"]:checked');
    console.log(engagementTypesChecked);

});

Answer 2

var engagementTypes = $('.engagement-type').parent().find('[data-checkbox="checked"]')

Это будет работать, только если вы нажмете на тип захвата div. Но если вы щелкнете по одному из флажков в div, родительский объект будет иметь атрибут с флажком, поэтому он не найдет другого в этом.

Поэтому вы всегда должны выбирать

var elementYouWant = $('.engagement-type')

Затем проверьте, проверен ли атрибут данных.

var dataElement = elementYouWant.data();
if (dataElement['checkbox'] == "checked") {
   console.log("Oh yeah baby")
}

Конечно, если их несколько, вы должны сделать это в al oop для каждого из них.