JQuery .on ('click', ...)이 작동하지 않습니다.

Question

사용자가 링크를 누르면 jstore-js-detailLink 클래스의 요소 뒤에 HTML을 삽입하려고합니다.

내 시도는 작동하지 않습니다

<a href="" class="jstore-js-detailLink">hello</a> 
<div class="lsp-popup-item-name"></div> 

<script type="text/javascript"> 
jQuery(document).on('click', 'a[class^=".jstore-js-detailLink"]', function() { 
    jQuery('<div id="stars-block" class="stars">'+ 
      '<div id="reviewStars-input">'+ 
      '<input id="star-4" type="radio" name="reviewStars"/>'+ 
      '<label title="gorgeous" for="star-4"></label>'+ 
      '<input id="star-3" type="radio" name="reviewStars"/>'+ 
      '<label title="good" for="star-3"></label>'+ 
      '<input id="star-2" type="radio" name="reviewStars"/>'+ 
      '<label title="regular" for="star-2"></label>'+ 
      '<input id="star-1" type="radio" name="reviewStars"/>'+ 
      '<label title="poor" for="star-1"></label>'+ 
      '<input id="star-0" type="radio" name="reviewStars"/>'+ 
      '<label title="bad" for="star-0"></label>'+ 
      '<br>'+ 
      '</div>'+ 
      '</div>').insertAfter(".lsp-popup-item-name"); 
}); 
</script> 

Answer 1

이 class 속성 선택에 .을 제거

jQuery(document).on('click', 'a[class^="jstore-js-detailLink"]', function(){ 

} 

위의 코드는 Attribute Starts With Selector라고합니다. 이 클래스는 jstore-js-detailLink으로 시작하는 클래스를 가진 DOM의 모든 anchror 요소에 click 처리기를 추가합니다.

.은 Class Selector을 사용할 때만 추가하십시오. 귀하의 경우에는, 아래의 코드는 작동합니다

$("a.jstore-js-detailLink").click(function(e){ 
    e.preventDefault(); 
    ........... 
}); 

는 e.preventDefault()가 링크 역할을하고 점프에서 앵커를 중지합니다 :

jQuery(document).on('click', 'a.jstore-js-detailLink', function() { 
    .......... 
} 

또는

당신은 그것을 단순화 할 수 있습니다 페이지 상단 또는 URL 끝에 #을 추가하십시오.

Answer 2

선택기를 class^="jstore-js-detailLink"으로 변경하고 event.preventDefault();을 이벤트 처리기에 추가하십시오.

jQuery(document).on('click', 'a[class^="jstore-js-detailLink"]', function(event) { 
    event.preventDefault(); 
    jQuery('<div id="stars-block" class="stars">'+ 
    '<div id="reviewStars-input">'+ 
    '<input id="star-4" type="radio" name="reviewStars"/>'+ 
    '<label title="gorgeous" for="star-4"></label>'+ 
    '<input id="star-3" type="radio" name="reviewStars"/>'+ 
    '<label title="good" for="star-3"></label>'+ 
    '<input id="star-2" type="radio" name="reviewStars"/>'+ 
    '<label title="regular" for="star-2"></label>'+ 
    '<input id="star-1" type="radio" name="reviewStars"/>'+ 
    '<label title="poor" for="star-1"></label>'+ 
    '<input id="star-0" type="radio" name="reviewStars"/>'+ 
    '<label title="bad" for="star-0"></label>'+ 
    '<br>'+ 
    '</div>'+ 
    '</div>').insertAfter(".lsp-popup-item-name") 
    }); 
</script>