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（）（这会导致文本框在点击后立即失焦）＆LT; / DIV＆GT;在.append（）和.html（）中的表单代码之前（jQuery解析它，所以它没有效果）

提前感谢您的帮助！

Answer 1

$("div.rep").click表示“查找具有rep类的元素，然后将函数绑定到该元素的click元素，即使该类在单击发生时消失了”。您希望“每当{em>当前具有click类”的元素发生rep事件时运行一个函数。

您可以使用on功能执行此操作：

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

on将事件绑定到祖先元素，在本例中为文档的body元素。所有click事件都会被捕获。如果一个源自与选择器div.rep匹配的元素，则运行该函数。

Answer 2

这是因为事件处理程序绑定到不属于其类名的元素，您应该取消绑定事件或使用.one()方法：

$("div.rep").one('click', function() {

但是，如果必须将处理程序绑定到具有.rep类名的元素，则可以使用事件委派：

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

使用jQuery插入表单

2 个答案: