jQuery Hover-Ereignis toggle-Klasse löst nicht aus

Question

Ich habe dieses Problem für eine gute Weile jetzt debuggen und ich bin so verwirrt, warum das nicht funktioniert.

Wie Sie sehen, bin ich den folgenden Code auf JSFiddle laufen und es scheint, überhaupt ohne Probleme zu arbeiten:

$(".assistance-submit-btn").hover(function() { 
 
    $(this).children('i').toggleClass("assistance-submit-btn-mouseover"); 
 
    });

.assistance-submit-btn { 
 
    font-size: 1.4rem; 
 
    font-weight:300; 
 
    padding: 10px 20px; 
 
    background: none; 
 
    border: 2px solid #333; 
 
    border-radius: 10rem; 
 
    color: #333; 
 
    margin: 25px auto 0; 
 
    display: block; 
 
} 
 

 
.assistance-submit-btn-mouseover { 
 
    transform:translate(10px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="assistance-submit-btn" value="Submit">Submit&nbsp;<i class="fa fa-caret-right"></i></button>

Wie Sie sehen können, wenn das assistance-submit-btn Element schwebte wird Es fügt dem Element i eine Klasse hinzu.

Dieser Code ist eine direkte Kopie von meiner lokalen Website, die ich entwickle, aber aus irgendeinem Grund auf meinem lokalen System wird es nicht ausgeführt, wenn das assistance-submit-btn Element schwebt.

Bisher habe ich versucht, dem Element selbst einen CSS-Hover hinzuzufügen, nur um zu sehen, ob das Element hinter einem anderen Element war oder nicht.

Der einzige Unterschied, den ich an meine lokale Einrichtung denken kann ist, dass das assistance-submit-btn Element von AJAX gezogen wird. Könnte dies das jQuery-Hover-Ereignis beeinflussen? Irgendwelche Vorschläge, warum dies passieren könnte, würden sehr geschätzt werden.

Dank

UPDATE: Vergessen Ich erhalte keine Fehler in meiner Konsole zu erwähnen.

Answer 1

Ja, es ist wegen Ajax dynamischen Inhalt. Verwenden Sie diesen Code:

$(document).on({ 
    mouseenter: function() { 
     $(this).children('i').addClass("assistance-submit-btn-mouseover"); 
    }, 
    mouseleave: function() { 
     $(this).children('i').removeClass("assistance-submit-btn-mouseover"); 
    } 
});