jQuery使用动态创建的按钮在动态创建的表中切换下一行答案

【问题标题】：jQuery Toggling next row in dynamically created table with dynamically created buttonjQuery使用动态创建的按钮在动态创建的表中切换下一行
【发布时间】：2015-12-14 09:21:29
【问题描述】：

我有一个 jQuery 动态创建的表，它从 json 文件中附加数据。表格的其中一行是附加到附加到表格中的行变量中的一行按钮：

var like = $("<a href='index.html'><button class='likeBtn'>like</button></a>");

var comment = $("<a href='index.html'><button class='comBtn'>comment</button></a>");

var toggle = $("<a href='index.html'><button class='togBtn'>show/hide comments</button></a>");

row3.append(like).buttonset();
row3.append(comment).buttonset();
row3.append(toggle).buttonset();

$("#table").append(row3);

现在我需要在单击切换按钮时切换表中下面的行。这是我的 onclick 函数：

$(function(){
    alert("in");
      $('.togBtn').click(function() {
          alert("in2");
          $(this).closest('tr').toggle();

      });
    });

当我将警报放入 click 函数中时，我看不到它们，但我确实看到了来自保存 click 函数的函数的警报。例如，我看到“in”，但没有看到“in2”。

当然该行没有切换。 commentRow 是需要切换的行的类。我尝试了很多选择，例如 -

 $("#table").closest('.commentRow').toggle();

还有 next() 、 All() 和许多其他的，我无法让它工作！！！

请 - 您对此的看法。所有帮助将不胜感激！

【问题讨论】：

在你不使用 click() 的动态创建的元素上，你要使用 on()

标签： javascript jquery html

【解决方案1】：

这是由于动态生成的内容，尝试一下：

$(document).on('click','.togBtn',function(e) {
   alert("in2");
   $(this).closest('tr').toggle();
   // or return false; // it does both preventDefault & stopPropagation.
});

这称为event delegation。此技术仅在您生成动态 DOM 节点时使用，就像您在代码中所做的那样。
因此，在这种情况下，所有事件都在页面最初加载时绑定，元素在页面加载后生成，因为浏览器由于不可用而没有为这些元素注册任何事件。在这种情况下，必须将事件委托给静态父节点或document 本身，因为它始终可用。

使用.on() 方法的事件委托语法：

$(staticParent).on(event, selector, cb);

【讨论】：

它终于有所作为了！！！它显示警报，但随后切换按钮行，自动刷新页面，一切恢复正常。
好的，现在它会切换评论！！！但是-它刷新页面并再次显示。如何阻止它刷新？
更新-我添加了 e.preventDefault() 现在它不会刷新页面但现在它隐藏了按钮行而不是注释行
更新！已解决：我使用了 $(this).parents("tr").next().slideToggle();它有效！谢谢你的帮助！！！

【解决方案2】：

借助此处发布的答案，我找到了一个可行的解决方案：

$(document).on('click','.togBtn',function(e) {
       alert("in2");
       e.preventDefault();
       $(this).parents("tr").next().slideToggle();
       // or return false; // it does both preventDefault & stopPropagation.
    });

感谢大家的帮助！

【讨论】：