使用 CSS 切换按钮和 .on() 绑定器生成动态字段

Question

问题：

我正在尝试使用 jQuery 构建动态表单。除了 CSS 程式化的 "hidden checkbox" 切换按钮外，还有一些标准的 html 表单输入。 (Example)

第一行是静态编码的，有一个按钮可以向表单中添加更多行以进行批量提交。应用于 .on(click) 事件的 JQuery 与静态内容完美配合，但新附加的表单行会忽略绑定。甚至 jsfiddle 的动态显示似乎都不起作用，尽管我的 fiddle 示例可能有一个我的工作副本没有的错误。 (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)。（删除功能）所以，我希望另一双眼睛可以帮助我找出我的错误所在。我知道这与关于基本主题的其他问题非常相似，但我首先阅读了很多这些讨论，并应用了其中的许多内容来达到我目前的状态。

更新：

我尝试了 Madhavan 的建议，它确实有效，但正如预期的那样，仅适用于 first-child。因此未指向动态添加的行。感谢您的快速浏览。我觉得这可能是一个 selector/scope 问题，但奇怪的是，一旦页面加载完毕，我可以直接在控制台中输入它并且它有效？
```
//this works run from console, but doesn't fire from a real click?
$(".theContainer .data .switch .toggleHappy").first().click();
```
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.

让我感到困惑的部分是，跳入控制台并使用完整选择器引用动态元素确实对动态元素起作用，但事件并未委托给它们。再次感谢浏览这个问题的眼睛，希望它能帮助别人，因为我还没有在网上找到这个。

Answer 1

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

Answer 2

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

//.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.

让我感到困惑的部分是，跳入控制台并使用完整选择器引用动态元素确实对动态元素起作用，但事件并未委托给它们。再次感谢浏览这个问题的眼睛，希望它能帮助别人，因为我还没有在网上找到这个。

使用 CSS 切换按钮和 .on() 绑定器生成动态字段

Dynamic field generation with CSS Togglebuttons and .on() binders

javascript

css

jquery

dynamic

togglebutton

问题：

更新：