javascript - 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();

      });
    });

当我将警报放入点击函数中时，我看不到它们，但我确实看到了来自包含点击函数的函数的警报。例如-我看到“in”但没有看到“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.
});

---

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

使用 .on() 方法进行事件委托(delegate)的语法:

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