javascript - 将 JQuery 添加到文件后 Input-group-btn 未显示

Question

这是我正在做的。

• 创建一个允许用户输入密码的模式
• 密码字段右侧将有一个按钮，可让您显示/隐藏字段中的文本。

这是我目前所拥有的。我的例子很完美。

• > http://jsfiddle.net/5wzs0njf/1/

这是我的 html 代码:

<div class="input-group col-md-8 col-md-offset-2">
     <input type="password" class="form-control" id="password" placeholder="Password">
     <span class="input-group-btn">
        <button type="button" id="passwordButton" class="btn btn-primary">Show</button>
      </span>
</div> 

这是我的查询函数:

<script>
$(function () {
$(".form-control").each(function (index, input) {
var $input = $(input);
$("#passwordButton").click(function () {
  var change = "";
  if ($(this).html() === "Show") {
    $(this).html("Hide");
    change = "text";
  } else {
    $(this).html("Show");
    change = "password";
  }
  var rep = $("<input type='" + change + "' />")
    .attr("id", $input.attr("id"))
    .attr("name", $input.attr("name"))
    .attr('class', $input.attr('class'))
    .val($input.val())
    .insertBefore($input);
  $input.remove();
  $input = rep;
}).insertAfter($input);
});
});
</script>

但是，当我将 jquery 添加到底部的文件时，我的按钮消失了。这是它应该的样子(在我添加 jquery 之前它的样子)

这是它的样子。

我做错了什么我错过了吗？我试图将其格式化为一个非常易于阅读/理解的问题。

Answer 1

您的代码中存在功能错误。在你的代码中

$("#passwordButton").click(function () {
  var change = "";
  .....
}).insertAfter($input);

您不需要此 insertAfter() 函数，因为您已经更改了按钮的名称。只需删除该功能即可

$("#passwordButton").click(function () {
  var change = "";
  .....
});

现在您的代码必须可以正常工作。