Question

我有这个网页

它应该过滤（使用isotope.js）页面上的旅行箱。它在safari，chrome，firefox，opera，..但在IE中，过滤器不起作用。更糟糕的是，JS在te span上的点击事件中根本没有做出反应。

这是一块js

    // Travel Isotope
var container = $('#travel-wrap');
container.isotope({
    animationEngine : 'best-available',
    itemSelector: '.travel-box ',
    animationOptions : {
        duration : 200,
        queue : false
    },
});

$(".filters span").click(function(){

    var elfilters = $(this).parents().eq(1);

    if( (elfilters.attr("id") == "alleReizen") && elfilters.hasClass("non-active") )
    {
        $(".label").each(function(){
            inActive( $(this) );
        });
        setActive(elfilters);
    }
    else{
        //set label alleReizen inactive
        inActive( $("#alleReizen") );
        if( elfilters.hasClass("non-active") ){
            setActive(elfilters);
        }
        else{
            inActive(elfilters);
        }
    }
    checkFilter();

    var filters=[];

    $(".search.filters").children().each(function(){
        var filter = $(this).children().children().attr("data-filter");

        if( $(this).hasClass("non-active") ){

            filters = jQuery.grep(filters, function(value){
                return value != filter;
            }); 

        }
        else{
            if(jQuery.inArray(filter,filters) == -1){
                filters.push(filter);
            }
        }


    });

    filters = filters.join("");
    filterItems(filters);

});


function filterItems(filters){
    console.log("filter items with filters:" + filters);
    container.isotope({
        filter : filters,
    }, function noResultsCheck(){
            var numItems = $('.travel-box:not(.isotope-hidden)').length;
            if (numItems == 0) {
                $("#no-results").fadeIn();
                $("#no-results").css("display", "block");
            }
            else{
                $("#no-results").fadeOut();
                $("#no-results").css("display", "none");
            }               
        });     
}

function setActive(el){
    el.removeClass("non-active");
    var span = el.find('i');
    span.removeClass("fa-check-circle-o").addClass("fa-ban");       
}

function inActive(el){
    el.addClass("non-active");
    var span = el.find('i');
    span.removeClass("fa-ban").addClass("fa-check-circle-o")        
}
function checkFilter(){

    var filterdivs = $('.filters span').parent().parent();

    if( filterdivs.not('.non-active').length == 0 ){
        setActive( $("#alleReizen") );
    }

    var filterLabels = $(".filters .label");

    if( filterLabels.not('.non-active').length == 0){
        setActive( $("#alleReizen") );
    }

}
function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
    if (numItems == 0) {
        //do something here, like turn on a div, or insert a msg with jQuery's .html() function
        alert("There are no results");
    }
}

可能是小而愚蠢的东西;但我找不到它.. 提前致谢！

Answer 1

在控制台中玩了一下，这看起来效果很好。

$(".filters").on('click', 'span', function(){
    // foo here
    console.log('foo');
});

也许在页面加载后，你的一个js文件会操纵过滤器？ .on将允许您选择一个容器来监听其中发生的更改，并传递您希望实际操作的元素。

如果您没问题，我建议您使用<button>元素，而不是<span>。

请告诉我这是否适合您。

Answer 2

在您的网站上，您可以构建如下按钮：

<button>
     <span>

     </span>
</button>

现在button元素被设计为按钮。它与input button不同。在后者中，您可以使用value设置标题。在button元素中，将其设置为文本节点。 button element可以包含跨度等元素。 spec 不清楚你是否应该在button元素的子元素上有事件处理程序。这是浏览器开发人员对允许与否的解释。

此问题已在此处发布（几次）

根据您的发现，Firefox似乎允许它。 IE不是。所以为了安全起见：按照预期的方式使用按钮。

将按钮包裹在范围内（不是真正合乎逻辑的）
将点击处理程序放在按钮上。

  $(".filters button").click(...);

IE点击事件跨度未触发

2 个答案: