我在锚标记的前面添加了一个图标，但是我想阻止它添加多次图标

Question

我想限制图标被添加多次每个锚标记。

如果您多次点击任何链接（foo，bar，baz），它会一直添加很多次。

任何想法如何阻止？

$('a').click(function() { 
 
    $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this)) 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a>foo</a> 
 
<br> 
 
<a>bar</a> 
 
<br> 
 
<a>baz</a>

Answer 1

你可以简单地使用jQuery one()方法。 这样，您的代码每click事件每个元素最多执行一次。

代码：

$('a').one('click', function() { 
 
    $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this)) 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a>foo</a> 
 
<br> 
 
<a>bar</a> 
 
<br> 
 
<a>baz</a>

Answer 2

添加CSS类已经有前加入一个项目的元素。

$('a').click(function() { 
    if ($(this).hasClass('item-already-added') == false) 
    { 
     $('<a href="#">...').insertBefore($(this)); 
     $(this).addClass('item-already-added'); 
    } 
}); 

Answer 3

当您将图标添加类也添加到该锚时，稍后检查它是否已具有该类。 FIDDLE

$('a').click(function() { 
if(!$(this).hasClass('have-icon')) { 
$(this).addClass('have-icon') 
    $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this)) 
} 
}); 

Answer 4

尝试这样，在点击按钮删除glyphicon和删除旧后添加glyphicon ,,,我认为，这将有助于你....

$(document).ready(function(){ 
 
$('a').click(function() { 
 
    var aa=$(this).prev('a:has(>i)').remove() 
 
    // console.log(aa) 
 
    $('<a href="#"><i class="glyphicon glyphicon-info-sign" style="color: #ccc;"></i></a>').insertBefore($(this)) 
 
}); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a>foo</a> 
 
<br> 
 
<a>bar</a> 
 
<br> 
 
<a>baz</a>