0

我试图对不同的断点产生各种影响。

主要我想做的是，当从720px 内的类别列表中单击一个类别时，类别列表应该淡出并且应该在该位置显示数据但是当宽度超过 720px时，类别列表不应该淡出而不是显示另一个 div 中的数据。

现在正在控制台中记录响应。

问题

每当页面以特定宽度加载时，不会执行单击，但是一旦我在其上调整浏览器的大小，单击就会开始注册。

我知道细节可能还不够，但仍然..

JS

$(document).ready(function(){
    $.ajax({
        url: "./assets/listcategory.php",
        cache: false,
        success: function(response){
            $('#content').html(response);
        }
    });



enquire
.register('screen and (max-width: 720px)', {
        match: function() {

            console.log('Width less than 720');

            jQuery('.category').off('click.catSelect');
            jQuery('.category').on('click.catSelect', function() {

                    var category = $(this).data('categories');
                    $.when($('.category').fadeOut(500)).done(function(){
                            //$(this).remove();
                    });
                    console.log('click within 720');

        }
})  
.register('screen and (min-width: 721px)', {
        match: function() { 

            console.log('width greater than 720');

            if($('.category').is(':hidden')) {
                    $.when($('.category').fadeIn(500)).done(function(){
                            //$(this).remove();
                    });
            }

            jQuery('.category').off('click.catSelect');
            jQuery('.category').on('click.catSelect', function() {

                console.log('Click outside 720');
            });

        }

})

});
4

1 回答 1

0

原因是.category当你调用方法时你的元素还没有加载register，因此jQuery('.category')不会匹配任何元素，并且没有绑定事件处理程序。

当您调整浏览器大小时，内容已加载，因此可以找到元素并成功绑定处理程序。

有几种方法可以解决这个问题。

一种是将调用移动register到 Ajax 成功回调中，就在您加载 html 之后。

或者，您可以将代码留在原处，但使用事件委托。

jQuery('#content').off('click.catSelect', '.category');
jQuery('#content').on('click.catSelect', '.category', function() { ... });

请注意，onandoff调用现在在#content选择器上进行（如果您愿意，甚至可以document），并且.category选择器作为第二个参数传递。这意味着它将适用于现在或将来.category存在的元素，这是您所需要的。

于 2016-07-03T14:34:59.830 回答