Question

单击“更改密码”按钮时，我试图将密码行变成输入字段。我已经使用Jquery了一半。因此，我做到了，当您单击“更改密码”时，将添加输入字段。同样，当他们单击“返回”时，也会显示原始状态。如果您看一下代码笔，您会发现单击“后退”后便无法再单击“更改密码”，因此无法使用jquery。有解决办法吗？

我还使用了jQuery'replaceWidth'，有没有更好的方法呢？我在我的Jquery中放了很多html，但不确定这是否是最好的方法。

请看看！

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>

Answer 1

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

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

Answer 2

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

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

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

这将影响其祖先行中具有change的所有ID为body的元素。

Javascript单击按钮将div转换为表格

2 个答案: