javascript - 获取jquery中动态生成的 anchor 标记的值？

Question

我有一个功能，其中我有动态生成的anchor标签。现在我有一个下一个按钮，单击它会生成另一个 anchor 标记，例如:8，如果最后一个数字是7。

例如:

<a id="a1" href="#">4</a>
<a id="a2" href="#">5</a>
<a id="a3" href="#">6</a>

我知道通过使用下面的代码我可以获得 anchor 值

 $('#a1').click(function () {
        alert($(this).text());
    });

单击下一步按钮时，我会附加另一个:

<a id="a3" href="#">7</a>

但是我生成了超过 100 个 anchor 标记(考虑一个分页器，我一直单击“下一步”按钮)。我无法对 100 个 anchor 标记的函数进行硬编码。我可以使用任何方法或通用方法来获取 anchor 标记的值吗？

Answer 1

使用Attribute Starts With Selector [name^=”value”]选择器，

我建议使用通用的class并基于class-selector选择元素

$('[id^="a"]').click(function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id="a1" href="#">4</a>
<a id="a2" href="#">5</a>
<a id="a3" href="#">6</a>

使用类选择器:

$('.a-elem').click(function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id="a1" class="a-elem" href="#">4</a>
<a id="a2" class="a-elem" href="#">5</a>
<a id="a3" class="a-elem" href="#">6</a>

注意:您可能需要考虑 Event delegation如果动态地添加元素