Question

我正在尝试使用jQuery向使用JavaScript生成的HTML元素添加/删除类。更具体地说，是一个WordPress主题中的prettyPhoto的HTML。我需要根据深子链接的类向prettyPhoto的主父div添加/删除一个类。这个类被prettyPhoto改变了。只有当您单击页面上的图像时，才会显示所有这些HTML。我不想摆弄实际的prettyPhoto脚本（包含在主题核心文件中），因此尝试使用jQuery函数。

生成的HTML（大致）是这样的：

<div pp_pic_holder>
  <1st level child>
      ...
            <6th level child>
              <a pp_expand>

我现在的js是这样的：

<script>
jQuery( 'body' ).on('change', 'div.pp_pic_holder', function() {
    jQuery( "a.pp_expand" ).parents( "div.pp_pic_holder" ).addClass( "contracted" ).removeClass( "expanded" );
    jQuery( "a.pp_contract" ).parents( "div.pp_pic_holder" ).addClass( "expanded" ).removeClass( "contracted" );
});
</script>

这不起作用。我已尝试使用.on和.live的不同选项，来自Stack Overflow上大约15个类似问题的示例，但没有...我几乎不知道js，所以阅读事件委托文档只打破了我的大脑。请帮忙。谢谢！

UPD： 感谢@Pete的建议。最终使这项工作的代码是：

<script>
jQuery( 'body' ).on( 'DOMSubtreeModified', function() {
    jQuery( "a.pp_expand" ).closest( "div.pp_pic_holder" ).addClass( "contracted" ).removeClass( "expanded" );
    jQuery( "a.pp_contract" ).closest( "div.pp_pic_holder" ).addClass( "expanded" ).removeClass( "contracted" );
});
</script>

jQuery，动态生成的目标HTML

0 个答案: