为什么在ajax调用之后下拉列表不起作用？

Question

我正在使用jquery代码在侧栏过滤器上做下拉列表。这段代码正常工作，但是在选择过滤器之后，这段代码就不能工作了，我想是因为ajax调用。什么是解决方案。请引导我

jQuery(function(){
    jQuery("#sidebar h4, #sidebar h3, body.woocommerce #sidebar>div>.inner .widget h4, body.woocommerce #sidebar>div>.inner .widget h3").on('click', function(){
        jQuery(this).parent().toggleClass("dropdown-hide");
    });
});

Answer 1

jQuery(document).on('click', "SELECTOR", function(event){ 
});

此操作将单击事件绑定到文档及其中的所有子元素。此方法还将用于动态创建的元素。

处理jQuery(document).on(事件

​

jQuery(function(){
        setTimeout(function () {
            jQuery('.btn-group').html('<button class="btn-default">Click</button>')
        },  1000);
        jQuery(document).on('click', ".btn-default", function(event){
            console.log('clicked');
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group"></div>

​

不处理jQuery(selector).on(事件

​

jQuery(function(){
        setTimeout(function () {
            jQuery('.btn-group').html('<button class="btn-default">Click</button>')
        },  1000);
        jQuery(".btn-default").on('click', function(){
            console.log('clicked');
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group"></div>

​

所以，你必须像下面这样改变

jQuery(document).on('click', "#sidebar h4, #sidebar h3, body.woocommerce #sidebar>div>.inner .widget h4, body.woocommerce #sidebar>div>.inner .widget h3", function(event){

});