你能操作jQuery中生成的HTML吗

Question

简单地说，当单击按钮时，我正在用jQuery加载div。然而，在这个div中是另一个按钮。加载的按钮，我似乎无法用jQuery操作/选择它。这里有一个例子来最好地展示我正在尝试的内容：

http://codepen.io/projodesign/pen/zlvaB

这是jQuery：-

$(document).ready(function(){
  $('.button').click(function(){
    $(this).after('<div class="added-element">IM THE ADDED DIV</div><div class="remove-added-element">REMOVE DIV</div>')
  });
  $('.remove-added-element').click(function(){
    $('.added-element').hide();
  });
});

我的jQuery知识非常基础，所以任何关于这方面的建议都会很好。很明显，我可以把它放在HTML中，但我希望可以添加无限数量的div。希望这一切都有意义。

Answer 1

执行顺序问题。您正在将事件处理程序添加到.remove-added-element中，然后它才存在。

如果您将该处理程序移到.button单击处理程序中，那么您的问题就会消失。

$('.button').click(function(){
    $(this).after('<div class="added-element">IM THE ADDED DIV</div><div class="remove-added-element">REMOVE DIV</div>');
    $('.remove-added-element').click(function(){
        $('.added-element').hide();
    });
});

编辑

nzifnab的解决方案更好。你可以修改我上面给出的代码来规避他提出的问题，但当他的方法如此简单时，你为什么要这么做呢？

双重编辑

既然你在下面说你想遵循这个解决方案，你确实需要遵循某些步骤来避免nzifnab提出的问题。我认为这样改变和调整他的建议会达到你想要的效果：

$('.button').click(function(){
    $(this).after('<div class="added-element">IM THE ADDED DIV</div><div class="remove-added-element">REMOVE DIV</div>');
    $(this).find('.remove-added-element').click(function(){
        $(this).closest('.added-element').hide();
    });
});

Answer 2

jsfiddle：http://jsfiddle.net/zW7zA/

您需要使用事件委派。尝试on方法：

$(document).ready(function(){
  $('.button').on('click', function(){
    $(this).after('<div class="added-element">IM THE ADDED DIV<div class="remove-added-element">REMOVE DIV</div></div>')
  });
  $(document).on('click', '.remove-added-element', function(){
    $(this).closest('.added-element').hide();
  });
});

这之所以有效，而你的无效，是因为当你直接绑定到.remove-added-element时，当脚本运行时，页面上还不存在元素，所以没有事件被绑定。使用这种新的委托形式，它将事件绑定到确实存在的document，然后当单击事物时，它将检查它们是否与给定的选择器匹配。

我不得不修改一些不适合您当前脚本的内容。

您的"移除"代码$('.added-element').hide()将移除所有新元素，即使您已多次单击该链接。这个新代码将只隐藏单击删除按钮的一个部分(closest会查找与选择器匹配的最近父级(。

我不太喜欢将事件绑定到原始事件处理程序中，因为如果你多次点击按钮，你将绑定许多事件-并且使用给定的代码，其中一些事件将"加倍"(如果你点击按钮10次，你将最终绑定10个事件到第一个新元素，9个事件到第二个，8个事件到三个，等等(，除非你修改它

这种方式更容易，它只会绑定一个事件。