未触发 IE 单击事件跨度

IE click event span not triggered

本文关键字：事件 单击 IE      更新时间：2023-09-26

我有这个网页

http://pocolocoadventures.be/reizen/

它应该过滤（用同位素.js）页面上的旅行框。它在野生动物园，铬，火狐，歌剧中也是如此。但在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");
    }
}

可能是一些小而愚蠢的东西;但我找不到它。提前感谢！

在您的网站上，您已经构建了如下所示的按钮：

<button>
     <span>
     </span>
</button>

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

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

  • 跨度内按钮，在 ff 中不可点击
  • Firefox 上

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

  • 将按钮包装在跨度内（不是很合逻辑）
  • 将单击处理程序放在按钮上。

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

控制台上玩了一下，这似乎效果很好。

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

也许过滤器是在页面加载后由您的一个 js 文件操作的？.on 将允许您选择一个容器，该容器侦听其中发生的更改，传递您希望实际操作处理的元素。

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

让我知道这是否适合您。

相关文章：