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.
});

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

使用.on()方法进行事件委派的语法：

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

Answer 2

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

200 OK HTTP

感谢大家的帮助！

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

2 个答案: