Question

曾经试图找到对我正在尝试做的事情的引用，但是什么也没找到。

我有一部分与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');

请记住，该元素在加载时在页面上不存在。我知道如何正常地动态检查复选框。

Answer 1

您可以设置一个函数（可能在DOMContentLoaded上设置了setTimeout），以便在最初加载DOM之后的一段时间后触发。这将是一个jQuery选择器，它将在页面上查找您的元素。选择它之后，您可以执行任何操作（选中该复选框，更改背景等）

关键是，您需要在选择器尝试选择时在DOM上呈现元素（否则它将返回空）

Answer 2

您需要使用event-delegation才能将事件绑定到动态创建的元素。

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

如何动态检查jQuery中动态创建的复选框？

2 个答案: