为什么单击处理程序不使用 Enquire.js 在页面加载时注册？

Question

我正在尝试对不同的断点产生不同的影响。

主要是我想做的是，当从类别列表中单击一个类别时 在 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');
            });

        }

})

});

Answer 1

原因是调用register方法时你的.category元素还没有加载，所以jQuery('.category')不会匹配任何元素，也没有绑定事件处理器.

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

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

一个是将对 register 的调用移动到 Ajax 成功回调中，就在加载 html.

之后

或者，您可以将代码留在原处，但使用 event delegation。

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

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

为什么单击处理程序不使用 Enquire.js 在页面加载时注册？

Why is a click handler not registering on page load using Enquire.js?

javascript

jquery

ajax

media-queries

enquire.js