使用jquery单击后显示一个按钮
使用jquery单击后显示一个按钮
提问于 2016-07-09 18:53:09
我对jquery很陌生，我正在努力使这段代码工作，但没有办法：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">Add</button>
<script>
$(document).ready(function(){
$("button.add").click(function() {
$(this).after('<div><button class="remove">Remove</button></div>');
});
//Remove items from cart
$("button.remove").click(function(){
$(this).fadeOut();
});
});
</script>
当我尝试在初始代码中的<div><button class="remove">Remove</button></div>之后添加下一行add button时，一切都正常工作。每当我使用JS代码添加新的remove按钮时，它都能工作，但我不能删除这些按钮。
请帮我修一下。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-09 19:01:20
这被称为事件委托。
您可以看到如下所示: jQuery在页面启动时将整个文档对象模型加载到变量或对象中。每次jQuery函数想要使用元素时，它都会搜索该变量或对象来查找它。但是在代码中，元素是在创建变量或对象之后添加的，因此jQuery无法与其交互，因为它不知道这个元素。
一个简单的解决方案：
$( "#parentDivOrElement" ).on( "click", "button.remove", function( event ) {
$(this).fadeOut();
});这基本上让我们在更新之后，让jQuery在当前DOM中找到元素。您应该用正确的ID或类替换#parentDivOrElement。
更多关于事件委托的信息：https://learn.jquery.com/events/event-delegation/
Stack Overflow用户
发布于 2016-07-09 19:02:33
使用：
$(body).on('click', 'button.remove', function(){
// do something
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38285215
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号