Javascript 使用jQuery插入表单

我有一个简单的表单（文本输入+提交按钮），当您单击类为rep的任何div时，它都会显示出来

$(document).ready(function(){
    $("div.rep").click(function(){
      $(this).removeClass('rep'); // Remove the class
      $(this).append("<form action='output.php' method='post'><input type='text' name='reply'><input type='submit'></form>"); // Add the form
    });
  });

$（文档）.ready（函数（）{
$（“div.rep”）。单击（函数（）{
$（this.removeClass（'rep'）；//删除该类
$（this）.append（“”；//添加表单
});
});

删除第三行的类很重要，因为再次单击div或在其中选择新表单不应创建另一个新表单。它似乎成功地删除了该类，因为在我单击该类后它会丢失其CSS轮廓，但当我再次单击div或单击其中的表单时，它仍然会创建另一个新表单，就好像它仍然拥有该类一样。有什么办法可以防止这种情况发生吗

以下是我尝试过但未成功的其他方法：
.html（）而不是.append（）（这会使其在单击文本框后立即取消聚焦）
在.append（）和.html（）中的表单代码之前（jQuery将其解析出来，这样它就没有效果了）

---

提前感谢您的帮助

这是因为事件处理程序绑定到元素而不是它们的类名，所以应该解除绑定事件或使用方法：

但是，如果必须将处理程序绑定到具有

.rep

类名的元素，则可以使用事件委派：

$('#aStaticParentElement').on('click', 'div.rep', function() {
    $(this).removeClass('rep');
    // ...
}); 

$（“div.rep”）。单击

意味着“找到具有

rep

类的元素，然后将函数绑定到该元素的

单击

元素，即使单击时该类已消失”。您希望“在当前具有

rep

类的元素上每次发生

单击

事件时运行函数”

您可以使用

on

功能执行此操作：

$(document.body).on('click', 'div.rep', function() {
    // function content
});

---

on

将事件绑定到祖先元素，在本例中是文档的

主体

元素。所有

点击
事件都会在那里被捕获。如果一个源于与选择器相匹配的元素
div.rep
，则该函数将运行。
谢谢！你的解释很有帮助，你的解决方案也奏效了。
$(document.body).on('click', 'div.rep', function() {
    // function content
});