Ajax调用后jQuery侧边栏筛选下拉菜单点击失效如何解决

当前代码的事件绑定仅对页面初始加载完成时就存在的DOM元素生效。触发Ajax刷新侧边栏筛选内容后，新渲染生成的h3、h4标题元素没有被绑定点击事件，因此下拉交互失效。

使用事件委托机制，将点击事件绑定到不会被Ajax刷新销毁的静态祖先节点上，即可让动态生成的元素也能响应点击逻辑，修改后代码如下：

jQuery(function(){
    // 若确认#sidebar节点本身不会被Ajax替换，可将document替换为'#sidebar'获得更好的性能
    jQuery(document).on(
        'click',
        "#sidebar h4, #sidebar h3, body.woocommerce #sidebar>div>.inner .widget h4, body.woocommerce #sidebar>div>.inner .widget h3",
        function(){
            jQuery(this).parent().toggleClass("dropdown-hide");
        }
    );
});

• 禁止在Ajax请求的success回调中重复绑定该点击事件，否则会出现单次点击触发多次类名切换的异常。
• 委托绑定的祖先节点层级越靠近目标元素，事件冒泡路径越短，运行性能越好。

内容的提问来源于stack exchange，提问作者farhat khan