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中的所有click元素添加了anchror处理程序，其中的类具有以jstore-js-detailLink开头的类。

仅在使用Class Selector时添加.。在您的情况下，以下代码也将起作用：

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

或

您可以将其简化为：

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

e.preventDefault()会阻止主播充当链接并跳转到页面顶部或在网址末尾添加#。

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>

JQuery .on（＆＃39;点击＆＃39;，...）不起作用

2 个答案: