Javascript 使用CSS切换按钮和.on（）绑定生成动态字段 问题:

我正在尝试使用jQuery构建一个动态表单。除了CSS样式化的“隐藏复选框”切换按钮外，一行中还有一些标准html表单输入

第一行是静态编码的，有一个按钮可以向表单中添加更多行以进行批量提交。应用于（单击）事件上的

.on的JQuery可以完美地处理静态内容，但是新添加的表单行忽略了绑定。即使是JSFIDLE的动态显示也似乎不起作用，尽管我的FIDLE示例可能有一个我的工作副本没有的bug

我已经研究并发现了使用
.click（）而不是使用
.on（click，selector，fn（））委派的常见错误，因此现在正在使用后者

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

更新：
我尝试了Madhavan的建议，事实上它确实有效，但正如预期的那样，只适用于第一个孩子。因此，动态添加的行不会指向。谢谢你的快速浏览。我觉得这可能是一个选择器/作用域问题，但奇怪的是，一旦页面加载，我就可以直接将其输入控制台，然后它就可以工作了

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


回答在此期间，我一直在处理另一个项目，它开始看起来像
。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() {});

//.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（）。请参阅更新的

让我困惑的是，跳入控制台并使用完整选择器引用动态元素确实可以处理动态元素，但事件并没有委托给它们。再次感谢大家关注这个问题，希望它能帮助其他人，因为我还没有在网上找到这个问题

我做了这样的改变，效果很好。但是我不知道为什么它没有触发“.toggleHappy”。
似乎只有在
.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() {});

//.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（）。请参阅更新的

让我困惑的是，跳入控制台并使用完整选择器引用动态元素确实可以处理动态元素，但事件并没有委托给它们。再次感谢大家关注这个问题，希望它能帮助其他人，因为我还没有在网上找到这个问题