使用 CSS Togglebuttons 和 .on() 绑定器生成动态字段

Question

问题：

我正在尝试使用 jQuery 构建动态表单。除了 CSS 风格的“隐藏复选框”切换按钮外，还有一些标准的 html 表单输入。 (Example)

第一行是静态编码的，有一个按钮可以在表单中添加更多行以进行批量提交。应用于 .on(click) 事件的 JQuery 与静态内容完美配合，但新附加的表单行忽略了绑定。甚至 jsfiddle 的动态显示似乎也不起作用，尽管我的小提琴示例可能存在我的工作副本没有的错误。 (Fiddle)

/*    activeToggle is the selector for the container and descendants,
//    .toggleHappy is the hidden input element within activeToggle    */
$(activeToggle).on("click", ".toggleHappy", function(e) {
    e.preventDefault();
    $(this).val(($(this).val() == 0) ? 1 : 0);
    console.log($(this).val());
});

我研究并发现了使用 .click() 而不是使用 .on(click, selector, fn()) 委托的常见错误，因此我现在使用后者。

令人沮丧的是，我还有另一个正在处理动态内容的 .on(click)。 （删除功能）所以，我希望另一双眼睛可以帮助我找出我的错误是什么。我知道这与关于基本主题的其他问题非常相似，但我首先阅读了很多这样的讨论，并应用了其中的许多来了解我目前的情况。

更新：

1. 我尝试了 Madhavan 的建议，它确实有效，但正如预期的那样，仅适用于第一个孩子。因此没有指向动态添加的行。感谢您的快速浏览。我觉得这可能是选择器/范围的问题，但奇怪的是，一旦页面加载，我可以直接在控制台中输入它并且它可以工作？

   //this works run from console, but doesn't fire from a real click?
   $(".theContainer .data .switch .toggleHappy").first().click();
   

2. ANSWER 在此期间，我一直在从事另一个项目，它开始看起来像 .on(event, selector, fn) 根本不适用于动态添加的项目。但是，我有一个突破！另一个项目稍微简化了一点，我发现如下：

   //.theContainer is static
   //.data .switch .toggleHappy is the dynamic chain created
   
   //does not delegate and bind dynamically
   $(".theContainer").on("click", ".data .switch .toggleHappy", function() {});
   
   //DOES work!
   $(".theContainer").on("click", ".toggleHappy", function() {});
   

   看起来像 .path .to .element 这样的选择器只适用于现有的静态内容，而 .element 允许 .on()为动态生成的节点正确绑定和委托。查看更新后的fiddle。

   让我感到困惑的部分是跳到控制台并使用完整的选择器引用动态元素 DID 对动态元素起作用，但事件并没有委托给它们。再次感谢您查看这个问题的眼睛，希望它可以帮助其他人，因为我还没有在网上找到这个。

Answer 1

似乎只有当 .on() 中使用的选择器是连续元素的列表时，使用 .on() 委派 jQuery 事件才对静态内容有效。在我的代码中，我有一个静态容器，我将一个事件委托给它，引用容器和目标元素之间的多个元素。它可以在本地对任意数量的静态标识元素起作用，但任何动态添加的元素都会忽略绑定。它也不会抛出任何错误，它会直接响应在控制台中执行的脚本行，使用与函数相同的选择器链接。我发现了以下内容：

//.theContainer is static
//.data .switch .toggleHappy is the dynamic chain created

//does not delegate and bind dynamically
$(".theContainer").on("click", ".data .switch .toggleHappy", function() {});

//DOES work!
$(".theContainer").on("click", ".toggleHappy", function() {});

看起来像 ".path .to .element" 这样的选择器只适用于现有的静态内容，而 ".element" 允许 .on()为动态生成的节点正确绑定和委托。查看更新后的fiddle。

让我感到困惑的部分是跳转到控制台并使用完整的选择器引用动态元素 DID 对动态元素起作用，但事件并没有委托给它们。再次感谢您查看这个问题的眼睛，希望它可以帮助其他人，因为我还没有在网上找到这个。

Answer 2

$(activeToggle).on("click", function(e) {
    e.preventDefault();
    $(":first-child",this).val(($(":first-child",this).val() == 0) ? 1 : 0);
    console.log($(":first-child",this).val());
});

我做了这样的改变并且工作正常。但我不确定为什么它没有触发“.toggleHappy”。