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

Question

我有一个功能，我有 anchor 动态生成的标签。现在我有一个下一个按钮，点击它会生成另一个锚标记例如：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”] select或

我建议使用基于 class-selector

的通用 class 和 select 元素

$('[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

遍历所有<a>，很简单：

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

Answer 3

试试这个

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

脚本：

var text=$(this).val()

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

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

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

你应该分配一个普通的 class 使用 Class Selector (“.class”)

HTML

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

脚本

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

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

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

Get value of anchor tag in jquery which generate dynamically?

javascript

anchor

jquery