从动态元素获取复选框状态答案

【问题标题】：get checkbox state from dynamic element从动态元素获取复选框状态
【发布时间】：2018-01-13 17:48:58
【问题描述】：

我正在使用 YouTube API 使用 each 函数将卡片列表填充到我的应用中。这些卡片被放入一个变量中，然后附加到一个播放列表容器中。

在各个卡片中可以切换到“收藏”视频。开关以及卡的其余部分是动态填充的，因此我尝试使用“on”“change”，而不是“.change”“function”。根据我准备的 on 方法，您可以使用它来操作动态元素。

我遇到的挑战是我似乎无法获得开关（复选框）的正确状态，而且无论我在做什么，我总是返回第一个 if 语句。谁能发现我在这里做错了什么？如果用户单击“收藏”视频，计划是推送到 firebase，但我无法使此功能正常工作。提前致谢！ :D

$(document).on("change", ".switch", function () {
if (this.checked) {
  console.log("Checked");
} else {
  console.log("NOT Checked");
}
});

【问题讨论】：

假设 .switch 是一个或多个 input type="checkbox" 元素上的一个类，那么你所做的是正确的。 this 将引用触发change 事件的元素，因此this.checked 是该元素的检查状态。为了让我们能够为您提供帮助，您需要使用 minimal reproducible example 来更新您的问题，以展示问题，最好是使用 Stack Snippets 的 可运行 问题（[<>] 工具栏按钮；@987654322 @)。
我不确定你应该使用 this.cheked 你可能想检查这个元素属性值
@MadeInDreams 为什么要检查值？在if 条件中使用this.value 将始终返回该值，即使未选中checkbox。示例JsFiddle 这将检查checkbox 是否为checked 并返回ID。 JsFiddle
如果元素是在页面加载后动态插入的，您必须参考 document.body 在这里查看我的答案stackoverflow.com/questions/203198/…
@MadeInDreams 如果元素是动态添加的，那么 $(document).on( 会处理这个问题，因此您的答案不会为 OP 尚未使用的内容提供任何有用的信息。

标签： javascript jquery dynamic-programming

【解决方案1】：

嘿，非常感谢大家的回复。我想出了以下有效的方法。经过 2 天的反复试验，终于找到了我想要的东西。

$(document).ready(function () {
$(document).on("change", ".switch", function (e) {
if (e.target.checked) {
  // code to run if checked
  console.log('Checked');
} else {
  //code to run if unchecked
  console.log('Unchecked');
}
});
// end document ready function
});

【讨论】：