附加元素后，按钮无法正常工作[重复]答案

【问题标题】：after append elements , button it does not work well [duplicate]附加元素后，按钮无法正常工作[重复]
【发布时间】：2018-12-22 14:42:38
【问题描述】：

当我单击按钮将元素附加到正文时，当我单击附加按钮（隐藏按钮）时不起作用。效果不好。请帮我解决这个问题。

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>

【问题讨论】：

为什么不立即将元素添加到 DOM，但将其样式设置为隐藏，然后使用 jQuery 显示/隐藏？
我想知道为什么它不起作用？

标签： javascript jquery

【解决方案1】：

这是因为在添加点击事件监听器时$('#hide-btn') 不存在。您应该在添加按钮后添加点击监听器或使用这个：

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

【讨论】：