我在錨標記的前面添加了一個圖標，但是我想阻止它添加多次圖標

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>