jQuery hover 이벤트 토글 클래스가 트리거되지 않음

Question

지금까지는이 문제를 디버깅 해 보았지만 왜 이것이 작동하지 않는지 혼란 스럽습니다.

당신은 내가 JSFiddle에 다음 코드를 실행하고 볼 수 있으며, 전혀 문제없이 작동하는 것 같다로서 다음 assistance-submit-btn 요소를 가리킬 때 당신이 볼 수 있듯이

$(".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>

i 요소에 클래스를 추가합니다.

이 코드는 내 로컬 웹 사이트에서 직접 복사 한 것입니다. 그러나 로컬 시스템에서 어떤 이유로 든 assistance-submit-btn 요소가있을 때 실행되지 않습니다.

지금까지 요소가 다른 요소 뒤에 있고 가져갈 수 없는지 확인하기 위해 CSS 호버를 요소 자체에 추가하려고 시도했습니다.

내 로컬 설정에서 생각할 수있는 유일한 차이점은 AYAX가 assistance-submit-btn 요소를 가져온 것입니다. 이것이 jQuery 호버 이벤트에 영향을 미칠 수 있습니까? 왜 이런 일이 일어날 지에 대한 제안은 많이 감사 할 것입니다.

감사

업데이트 : 내 콘솔에서 오류를 받고하지 오전 언급하는 것을 잊었다.

Answer 1

예, Ajax 동적 콘텐츠 때문입니다. 이 코드를 사용하십시오 :

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