CSS-Animation deaktiviert auf einem div klicken, wenn mit AJAX verwendet

Question

Ich habe diese „wählen Sie einen Kuchen“ Seite HERE, wenn ich jetzt einen Kuchen wählen und auf Weiter klicken, wird eine neue Seite über AJAX geladen und die Boxen haben ein fadeInUp Animation, aber die Boxen werden unleserlich, Warum? Wenn ich die Animationen entfernen Sie es in Ordnung, im Grunde die AJAX-Code arbeitet, die die nächste Seite lädt unter:

$(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; 
}); 

Nun, wenn Sie feststellen, genau dort diese Funktion ist shownewcontent(), die wie folgt aussieht:

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

Und innerhalb dieser Funktion gibt es die runWaypoints(); Funktion, die die Animationen tatsächlich hinzufügt.

Also wie gesagt, wenn ich die Animationen nicht hinzufüge, kann die Box auf der nächsten Seite angeklickt werden, aber wenn ich die CSS Animationen anschließe, werden die Boxen unklickbar, Warum?

Answer 1

Aus irgendeinem Grund scheint die Animation das Element figure über das Element label zu bringen, das Ihr Auslöser für den Zugriff auf den Optionsschalter ist. Da die figure über der label ist, ermöglicht es Ihnen nicht, auf die label zuzugreifen und somit das Klickereignis nicht passiert.

Es ist schwierig, das Problem auf Ihrer Seite genau einzugrenzen (ohne einen Geigenspielplatz zu haben), aber ich nehme an, dass es etwas damit zu tun hat, wie Layer-Erstellung für beschleunigtes Rendering funktioniert. In dieser Animation animieren Sie die opacity des Elements, was bedeutet, dass eine neue Ebene für dieses figure Element erstellt wird und möglicherweise über die label platziert wird.

Eine Lösung wäre, ein z-index zu dem label Element hinzuzufügen.

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

Oder Sie pointer-events: none zum figure Element festlegen können, damit Sie die label zugreifen können.

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