Как вы динамически проверяете динамически созданный флажок в jQuery? - PullRequest
Новая
       15

Как вы динамически проверяете динамически созданный флажок в jQuery?

0 голосов
/ 24 октября 2018

Я пытался найти ссылку именно на то, что я пытаюсь сделать, но ничего не нашел.

У меня есть часть формы, которая добавлена ​​с помощью JS.

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

Это отлично работает на всем, что было там, когда страница загружена, но с динамически созданными элементами я даже не могу манипулировать ими с помощью JSв консоли.

Вот флажок HTML: 

<div class="check-container full optional-extra">
    <input id="Accomodation-Delegates[1]" type="checkbox" name="Delegates[1].SelectedOptionalExtras" value="43b595df-accc-e811-a2dd-00155d0fd300" data-price="25.00">
    <label for="Accomodation-Delegates[1]" class="check-label">Accomodation - £25.00</label>
</div>

Вот раздел в jQuery: 

$('[value="43b595df-accc-e811-a2dd-00155d0fd300"]').prop('checked', true).trigger('change');

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

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Вам необходимо использовать делегирование события , чтобы связать события с динамически создаваемыми элементами. 

$(document).on('click', '[type="checkbox"]', function() {
  console.log(this.value);
});

// This is just to demonstrate the dynamic creating process.
setTimeout(function() {
  $('#parent').append($('<div class="check-container full optional-extra"><input id="Accomodation-Delegates[1]" type="checkbox" name="Delegates[1].SelectedOptionalExtras" value="43b595df-accc-e811-a2dd-00155d0fd300" data-price="25.00"><label for="Accomodation-Delegates[1]" class="check-label">Accomodation - £25.00</label></div>'));
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'></div>
0 голосов
/ 24 октября 2018

Вы можете задать функцию set (setTimeout для DOMContentLoaded возможно), которая будет запускаться через некоторое время после первоначальной загрузки DOM.Это будет селектор jQuery, который будет искать ваш элемент на странице.После того, как вы выберете его, вы можете делать с ним все, что вам нужно (установить флажок, изменить фон и т. Д.)

Дело в том, что вам нужен элемент, отображаемый в DOM, в точке, гдеселектор пытается выбрать его (иначе он вернется пустым)

...