Alexander Solonik Alexander Solonik - 6 months ago 10
Javascript Question

CSS animation disables click on a div when used with AJAX

I have this "select a cake" page HERE, now when I select a cake and click next, a new page is loaded through AJAX and the boxes have a

fadeInUp
animation but the boxes become unclickable, Why ? If I remove the animations it works fine, basically the AJAX code that loads the next page is below:

$(document).on('click' , '.btn-next' , function(){

if ($(this).hasClass('disabled')) {
return false;
}

var toLoad = $(this).attr('href')+' #cake-selection-content';
$('#cake-selection-content').animate({ 'opacity' : 1 },loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#cake-selection-content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#cake-selection-content').show('normal' , setTimeout(function(){
runWaypoints();
}, 1000));
}
return false;
});


Now if you notice closely there is this function
shownewcontent()
that looks as follows:

function showNewContent() {
$('#cake-selection-content').show('normal' , setTimeout(function(){
runWaypoints();
}, 1000));
}


And inside that function there is the
runWaypoints();
function that actually adds the animations.

So as I said, if I don't add the animations the box on the next page are clickable, but if I do add the CSS animations then the boxes become unclickable, Why?

Answer

For some reason, the animation seems to bring the figure element above the label element which is your trigger to access the radio button. Since the figure is above the label it is not allowing you to access the label and thus the click event doesn't happen.

It is difficult to exactly narrow down the problem in your page (without having a fiddle playground) but I assume that it might have something to do with how layer creation works for accelerated rendering. In this animation, you are animating the opacity of the element which means a new layer is created for this figure element and it is possibly getting placed above the label.

One solution would be to add a z-index to the label element.

.input-whts-the-occcaion > label {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 1;
}

Or, you can set pointer-events: none to the figure element so that you can access the label.

.bp-help-buy-cake .whats-the-occasion .help-buy-cake-box {
    width: 255px;
    height: 255px;
    pointer-events: none;
}