Question

我是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代码添加新的删除按钮，它可以工作，但我无法删除这些按钮。

请帮我解决。

Answer 1

这称为事件委托。

您可以看到如下：jQuery在页面启动时将整个文档对象模型加载到变量或对象中。每当jQuery函数想要使用一个元素时，它就会搜索该变量或对象来查找它。但是使用你的代码，元素会在之后添加来创建变量或对象，并且jQuery无法与之交互，因为它不知道这个元素。

一个简单的解决方案：

$( "#parentDivOrElement" ).on( "click", "button.remove", function( event ) { $(this).fadeOut(); });

这基本上让jQuery在更新后找到当前DOM中的元素。您应该将#parentDivOrElement替换为正确的ID或类。

有关活动授权的更多信息： https://learn.jquery.com/events/event-delegation/

Answer 2

使用：

$(body).on('click', 'button.remove', function(){
// do something
});

使用jquery单击后淡出一个按钮

2 个答案: