IE click event span not triggered

Question

I'm having this webpage

And it should filter (with isotope.js) the travelboxes on the page.It does in safari, chrome, firefox, opera, .. but in IE, the filter doesn't work. Even worse, JS doesn't react at all at a click event on te span.

This is the piece of 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");
    }
}

Probably something small and stupid; but I can't find it.. Thanks in advance!

I guess that the span disappears and cannot be clicked by the animation that is over it. What happens if you disable the animation? — Mouser, Jan 25 '15 at 22:01
I've disabled the animation, but still it's not working fine in IE, it does in the other browsers. I've done it on the dev server: http://dev.design311.com/pocoloco/reizen/ — user3346696, Jan 26 '15 at 18:47
Your code has a bug when it loads in IE (*main.js*) `Kan de eigenschap offsetWidth van een niet-gedefinieerde verwijzing of een verwijzing naar een lege waarde niet ophalen`. Seems to come from Google Maps api. — Mouser, Jan 26 '15 at 19:37
That one is fixed, was indeed from Google Maps (forgot to update the footer on the dev) — user3346696, Jan 26 '15 at 22:30

The F · Answer 1 · 2015-01-26T21:25:47.983

played around in the console a bit, and this seemed to work well.

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

Maybe the filters are manipulated by one of your js files after page load? .on will allow you to select a container which listens on changes that happen inside it, passing the element you want the actual action to work on.

If it's ok for you, I'd suggest to use the <button> element, instead of the <span>.

Let me know if that works for you.

score 0 · Answer 2 · edited May 23 '17 at 11:52

On your website you've build the buttons like this:

<button>
     <span>

     </span>
</button>

Now the button element is designed to be a button. It differs from the input button. In the latter you'd set the caption using value. In the button element you set it as a text node. The button element can contain elements like a span. The spec isn't very clear about whether or not you should have event handlers on the children of the button element. It's a browser developers interpretation of allowing it or not.

This problem has been posted here before (a few times)

It seems that Firefox is allowing it, based upon your findings. IE isn't. So to be on the safe side: use the button the way it was intended.

Wrap the button inside a span (not really logical)
Put the click handler on the button.

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

IE click event span not triggered

2 Answers2