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

Question

问题:

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

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

更新:

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

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

2. 回答 在此期间我一直在从事另一个元素，它开始看起来像 .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() 为动态生成的节点正确绑定(bind)和委派。查看更新的 fiddle .

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

Answer 1

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

//.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() 为动态生成的节点正确绑定(bind)和委托(delegate)。查看更新的 fiddle .

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