1

我有一个简单的表单（文本输入 + 提交按钮），当您单击任何类为 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() （这会导致它在单击后立即取消聚焦文本框）
</div> 在 .append() 内部的表单代码之前和.html() （jQuery 将其解析出来，因此无效）

在此先感谢您的帮助！

4

2 回答 2

2

$("div.rep").click意思是“找到一个带有rep类的元素，然后将一个函数绑定到该元素的click元素，即使当点击发生时类已经消失了”。您希望“每次在当前具有该类click的元素上发生事件时运行一个函数”。rep

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

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

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

于 2013-05-25T20:31:31.753 回答
1

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

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

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

$('#aStaticParentElement').on('click', 'div.rep', function() {
    $(this).removeClass('rep');
    // ...
});
于 2013-05-25T20:29:58.337 回答