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と呼ばれています。これは、DOM内のすべてのanchror要素（jstore-js-detailLinkで始まるクラスを持つ）にclickハンドラを追加します。

.は、Class Selectorを使用している場合にのみ追加します。あなたのケースでは、以下のコードでも動作します：

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

または

をあなたはそれを簡素化することができます：e.preventDefault()がリンクとして機能し、にジャンプからアンカーを停止します

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

ページの先頭にURLを追加するか、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>