个人中心
gpt4 book ai didi

JQuery 创建元素并使用 .each() 添加事件失败

转载 作者：行者123 更新时间：2023-12-01 00:09:55 25 4
gpt4 key购买 nike

原来的html只有2个超链接。

我想要

  1. 在每个超链接后面添加每个按钮。
  2. 单击按钮时显示每个超链接值。
    如果我单击第一个按钮，将提醒“ahref”。
    如果我点击第二个按钮，将提醒“bhref”。

但结果是两个按钮都警告“bhref”。

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('a').each(function(){
            get_href=$(this).attr("href");
            new_ele = $("<button type='button'>test</button>");
            new_ele.click(function(){
                alert(get_href);
            });
            $(this).append(new_ele);
        });
    });
</script>
<body>
</body>
<a href="ahref" >a</a>      
<a href="bhref" >b</a>  
</html>

最佳答案

您需要使用一些closure ，例如:

$(document).ready(function () {
    $('a').each(function () {
        var get_href = $(this).attr("href");
        var new_ele = $("<button type='button'>test</button>");
        (function (get_href) {
            new_ele.click(function () {
                alert(get_href);
            });
        })(get_href);
        $(this).append(new_ele);
    });
});

-jsFiddle-

现在，如果您面临此类有关闭包和每个循环的问题，通常有更好的方法来处理它。请参阅例如获得相同预期行为的其他方式:

$(document).ready(function () {
    var new_ele = $("<button type='button'>test</button>").on('click', function () {
        alert($(this).parent().attr('href'));
    });
    $('a').append(new_ele.clone(true));
});

关于JQuery 创建元素并使用 .each() 添加事件失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33842462/

25 4 0
文章推荐： jquery - jquery-select2 的依赖下拉内容
文章推荐： javascript - 刷新后，JS 脚本在部分 View 中不起作用
文章推荐： python - 使用 python sqlalchemy 通过WITH语句执行原始查询
文章推荐： javascript - GAS : HtmlService. getUserAgent() 使用 V8 时返回 null
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com