个人中心
gpt4 book ai didi

javascript - 单击同一个 div 时，HTML 按钮变为另一个按钮

转载 作者：行者123 更新时间：2023-11-30 17:14:05 24 4
gpt4 key购买 nike

非常感谢您的帮助:)

我在 HTML 和 javascript 中有我的项目，我需要创建一个按钮，一旦单击，它将被另一个按钮替换，并且出现的按钮在被单击后也将被前一个按钮替换。

这是我的 javascript 代码和 HTML。

<html>
<body>
    <div id="container">
        <button id="create">create</button>
    </div>
    <script>
        $('#create').click(function() {
            $('#container').html('<button id="again">again</button><button id="cancel">cancel</button>');
        });

        $('#again').click(function() {
            $('#container').html('<div><button id="create">create</button></div>');
        });

        $('#cancel').click(function() {
            $('#container').html('<div id="cancel">cancel</div>');
        });
    </script>
</body>
</html>

或者试试这个链接:http://codepen.io/enrison09/pen/hwlBA

在此先感谢您! :)

最佳答案

您的代码的问题在于，点击函数仅将事件处理程序设置为调用它时可用的 DOM 元素。这意味着您将无法将它用于之后添加到 DOM 的任何内容。

解决方案是改用 on() 函数，如下所示:

$(document).on('click', '#create', function() {
  $('#container').html('<button id="again">again</button><button id="cancel">cancel</button>');
});

$(document).on('click', '#again', function() {
  $('#container').html('<div><button id="create">create</button></div>');
});

$(document).on('click', '#cancel', function() {
  $('#container').html('<div id="cancel">cancel</div>');
});

on()使用动态添加到 DOM 的元素。

请在此处查看您的示例:http://codepen.io/anon/pen/rLjki

但是，有更好的方法来做到这一点(比如始终在 DOM 中拥有所有需要的按钮，并且只是在哪个阶段可见和不可见)。

关于javascript - 单击同一个 div 时，HTML 按钮变为另一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26446442/

24 4 0
文章推荐： c# - 禁用 DataGrid 中的特定单元格编辑
文章推荐： 双链表删除函数的代码减少
文章推荐： c# - 以编程方式输出到 MSword；感应线端
文章推荐： c - 根据鼠标旋转图像
行者123
个人简介

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

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