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

Question

我有一个动态创建的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();

      });
    });

当我在点击功能中放置警报时，我看不到它们，我确实看到来自保存点击功能的功能的警报。 例如 - 我看到“在”但我没有看到“in2”。

当然行不会被切换。 commentRow是需要切换的行的类。 我尝试过很多选择，比如 -

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

还有next（），All（）和其他许多人，我无法让它工作！

拜托 - 你对此的看法。 所有帮助将不胜感激！

Answer 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);

Answer 2

在这里发布的答案的帮助下，我发现了一个有效的解决方案：

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

感谢你的帮助！