javascript - 使用 Jquery 隐藏和显示动态创建的 UL 列表？

Question

嗯，正如问题所说，我找到了一个使用 Jquery 使 UL 列表显示和隐藏的代码。

这是 jsFiddle 上的链接，当我直接在 HTML 上创建 UL 列表时，它可以工作，但如果我使用 javascript 动态添加它，则不行。 http://jsfiddle.net/p2v0ka1s/4/

我发现的问题是，Jquery 创建了通过单击调用和更改的类名，而这些类名不适用于我的动态 UL 列表，我不知道为什么。你能帮我吗？

这是我动态创建它的代码以及不起作用的 jquery 测试。 http://jsfiddle.net/aytnt4bL/1/ Jquery 代码位于 javascript 代码的按钮处(我将其添加到此处，但我将其作为单独的源文件存储在我的计算机中。

我也在文本中添加了代码，这样你就可以看到它!它与非动态 UL 列表完美配合，因此我的问题是，使其与我动态创建的 UL 列表配合使用。谢谢!

 $(function() {
    $('.contactlist').click(function(e) {
      e.stopPropagation();
      var sub = $('> ul', this);
      if(sub.length) {
        if(sub.is(':visible')) {
          sub.hide();
          sub.removeClass('open');
        } else {
          $('.contactlist .open').hide().removeClass('open');
          sub.show();
          sub.parents('ul:not(.contactlist)').addClass('open').show();
          sub.addClass('open');
        }
      }
    });
  });

感谢您的帮助!

Answer 1

您需要使用event delegation 用于将事件附加到动态添加的元素:

$('body').on('click','.contactlist',function(e) {
  e.stopPropagation();
  var sub = $('> ul', this);
  if(sub.length) {
    if(sub.is(':visible')) {
      sub.hide();
      sub.removeClass('open');
    } else {
      $('.contactlist .open').hide().removeClass('open');
      sub.show();
      sub.parents('ul:not(.contactlist)').addClass('open').show();
      sub.addClass('open');
    }
  }
});