javascript - 使用 jQuery 插入表单

Question

我有一个简单的表单(文本输入 + 提交按钮)，当您单击类为 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
    });
  });

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

以下是我尝试过的其他一些未成功的事情:
.html() 而不是 .append()(这会导致它在单击后立即取消文本框的焦点)