为什么单击处理程序未使用Enquire.js在页面加载时进行注册? [英] Why is a click handler not registering on page load using Enquire.js?

问题描述

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

I am trying to have various effects on different breakpoints.

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

Primarily what I am trying to do is when a category is clicked from the category list within 720px the category list should fade out and data should be revealed in that place but when the width goes beyond 720px, the category list shouldn't fade out instead reveal the data in another div.

现在在控制台中记录响应.

For now am logging responses in console.

问题

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

Whenever the page loads in a particular width, click is not performed but once I resize the browser thereon the clicks start registering.

我知道详细信息可能还不够，但是仍然如此.

I know the details might not be enough but still..

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');
            });

        }

})

});

推荐答案

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

The reason is that your .category elements have not loaded yet when you call the register method, and so jQuery('.category') will not match any element, and no event handler is bound.

在调整浏览器大小时，已加载内容，以便找到元素，并成功绑定处理程序.

By the time you resize your browser, the content has been loaded, so that then the elements are found, and handlers are bound successfully.

有几种解决方法.

一种方法是在加载html之后立即将对register的调用移到Ajax成功回调中.

One is to move the calls to register into the Ajax success callback, right after you load the html.

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

Or, you can leave the code where it is, but use event delegation.

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

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

Note that the on and off calls are now made on the #content selector (could even be document if you wanted to), and that the .category selector is passed as second argument. This means it will work for .category elements that exist now or in the future, which is what you need.

这篇关于为什么单击处理程序未使用Enquire.js在页面加载时进行注册?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！