Question

我有一个功能，我有动态生成的anchor标签。现在我有一个下一个按钮，onclick会生成另一个锚标签，例如：8如果最后一位是7。

例如：

<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和选择元素

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用class-selector：

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意：如果要追加元素dynamically，您可能需要考虑Event delegation

Answer 2

目前您使用的是“直接”绑定，它只会在您的代码进行事件绑定调用时附加到页面上存在的元素。

当动态生成元素时，您需要使用Event Delegation委托事件方法.on()。

您应该使用Class Selector (“.class”)

指定一个公共类

HTML 的

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

脚本

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

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

Answer 3

遍历所有<a>，这很容易：

$('a').each(function() {
    $(this).on('click', function(e) {
         alert($(this).text());
    });
});

Answer 4

尝试这样。

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

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

Answer 5

试试这个

<a id="a1" href="#" value="4">4</a>

脚本：

var text = $（this）.val（）

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

5 个答案: