将JQuery添加到文件后，输入组-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 = "";
  .....
});

现在你的代码必须正常工作。