在附加元素之后,button它不能很好地工作



当我点击按钮时,将元素附加到主体,当我点击附加按钮(隐藏按钮(时,不起作用。它不太好用。请帮我解决这个问题。

function func_add(){
$('body').append('<div class="test"><button id="hide-btn">hide</button><div id="red"></div></div>');
}
$('#btn').click(function(){
func_add();
});
$('#hide-btn').click(function(){
$('#red').hide();
});
#red{
background:red;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button id="btn">click me</button>
</body>
</html>

这是因为添加点击事件侦听器时$('#hide-btn')不存在。您应该在添加按钮后添加click listener或使用以下内容:

$('body').on('click', '#hide-btn', function () {
$('#red').hide();
});

最新更新