获取动态生成的jquery中锚标记的值？

Question

我有一个功能,我有anchor动态生成的标签.现在我有一个下一个按钮,onclick将生成另一个锚标记例如:8如果最后一个数字是7.

对于Eg:

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

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

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

点击next按钮我追加另一个:

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

但是我生成了100多个锚标签(考虑一个分页器,我一直点击下一个按钮).我不能硬编码100个锚标签的功能.是否有任何方法或通用方法可用于获取锚标记的值？

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>

使用class-selector:

$('.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是否要追加元素dynamically

Answer 2

目前您正在使用的是一种"直接"绑定,它只会在您的代码进行事件绑定调用时附加到页面上存在的元素.

在动态生成元素时,您需要使用.on()委托事件方法来使用事件委派.

您应该使用类选择器(".class")分配一个公共类

HTML

<a class="anchorLink" href="#">6</a>

脚本

$(document).on('click', "a.anchorLink", function(){
    alert($(this).text())
});

代替document你应该使用最接近的静态容器以获得更好的性能.