javascript - 我正在向 anchor 标记的前面添加一个图标，但是我想阻止它多次添加图标

Question

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

如果您多次点击任何链接(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>