Javascript 在按钮单击时将 div 转换为表单答案

【问题标题】：Javascript turn div into form on button clickJavascript 在按钮单击时将 div 转换为表单
【发布时间】：2018-11-08 21:05:24
【问题描述】：

单击“更改密码”按钮时，我试图将密码行转换为输入字段。我已经在使用 Jquery 了。所以我已经做到了，当您单击“更改密码”时，输入字段会被添加。此外，当他们单击“返回”时，会显示原始状态。如果您查看codepen，您会注意到单击“返回”后，您无法再次单击“更改密码”，jquery 不起作用。有解决办法吗？

我也使用过 jquery 'replaceWidth'，有没有更好的方法来做到这一点？我将很多 html 放入我的 Jquery 中，但不确定这是否是最好的方法。

请看一下！

https://codepen.io/liamdthompson/pen/WYwXeK

$("#change").click(function () {
  $("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
  $(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');


  $("#yeet").click(function () {
    $(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
    $("#zing").replaceWith('<div class="" id="container">*********</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
  <div class="row">
  </div>

  <div class="row">
      <div class="col">
          <h6> Password</h6>
      </div>
      <div class="col" id="container">
          *********
      </div>
  </div>

  <button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>

【问题讨论】：

您是否有理由不能只在 HTML 中创建它们并在必要时显示/隐藏它们？
使用显示/隐藏而不是替换宽度有什么好处吗？
明显的好处：您不会丢失附加的 javascript 处理程序。
这是一种更简单的方法，而不是通过字符串动态创建一些元素。您只需致电.show() 或.hide()。您只需显示/隐藏，不涉及复杂性。
Event binding on dynamically created elements?的可能重复

标签： javascript jquery html input

【解决方案1】：

这是因为您的#change on click 事件在页面加载时绑定到 dom 元素。

要将事件绑定到动态创建的元素，请使用.on 功能绑定到文档，例如this。

【讨论】：

出于性能（甚至逻辑）原因，建议绑定到可能最近的非动态父级。仅当您别无选择时才绑定到document/body。

【解决方案2】：

当您重新插入按钮时，您必须再次重新附加事件侦听器。

否则另一种解决方案是在父类上使用派生事件，即。

$('body').on('click', '#change', function(){});

这将影响 ID 为 change 且其祖先行中有 body 的任何元素。

【讨论】：