<分区>
标签 javascript jquery html css
<分区>
我是 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 代码添加新的删除按钮时，它都有效，但我无法删除这些按钮。
请帮我修复它。
最佳答案
这称为事件委托(delegate)。
您可以这样看:jQuery 在页面启动时将整个文档对象模型加载到一个变量或对象中。每次 jQuery 函数想要使用一个元素时，它都会搜索该变量或对象以找到它。但是对于您的代码，该元素是在创建变量或对象后添加的，jQuery 无法与之交互，因为它不知道该元素。
一个简单的解决方案:
$( "#parentDivOrElement" ).on( "click", "button.remove", function( event ) {
$(this).fadeOut();
});
这基本上让 jQuery 在更新后找到当前 DOM 中的元素。您应该将 #parentDivOrElement 替换为正确的 ID 或类。
更多关于事件委托(delegate): https://learn.jquery.com/events/event-delegation/
关于javascript - 使用 jquery 单击后淡出按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38285215/
相关文章：
javascript - TypeScript 嵌套静态属性
javascript - 在javascript函数上添加多个变量？
javascript - Div 右对齐并根据右侧的其他 Div 更改 x 位置
javascript - Jquery 幻灯片在 IE 11 中的显示方式与在 Chrome 中的显示方式不同？
javascript - 其功能的正确语法形式是什么——Javascript
javascript - 如何在 React useState 中存储和更新多个值？