JQuery와 내 사이트에이 멋진 codepen을 구현했습니다

Question

클릭 대상 : 매끄러운 대상을 필터링 할 때 http://kenwheeler.github.io/slick/

그리고 : https://codepen.io/ccrch/pen/yyaraz

$('.display-image') 
.on('change', function(){ 
    $(this).children('img').css({'transform': 'scale('+ $(this).attr('data-scale') +')'}); 
}) 
.on('mouseover', function(){ 
    $(this).children('img').css({'transform': 'scale('+ $(this).attr('data-scale') +')'}); 
}) 
.on('mouseout', function(){ 
    $(this).children('img').css({'transform': 'scale(1)','transition': 'transform .3s ease-out'}); 
}) 
.on('mousemove', function(e){ 
    $(this).children('img').css({'transform-origin': ((e.pageX - $(this).offset().left)/$(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top)/$(this).height()) * 100 +'%'}); 
}) 

문제는 내가 매끄러운 슬라이더 객체를 대상으로하고 있습니다 개체 '.display-image'는 더 이상 이러한 클릭 이벤트를 등록하지 않습니다. 이 객체의 대상을 다시 지정하려면 어떻게해야합니까?

Answer 1

슬라이더에 ID를 부여한 다음 스타일 클래스가 아닌 $ ('# id')로 참조하는 것을 고려하십시오 (jquery가 점 표시 이미지를 찾는 방법).

Answer 2

나는 해결책을 찾아 냈다. 코드 대신 데에, 이벤트 리스너의 변화를보기 위해서는 :

$('.display-image').on('click', function() {*code here*}); 

제가

$(document).on('click', '.display-image', function() {*code here*});