after append elements , button it does not work well

Question

when i click button append elements to body and when i click on the appended button(hide button) not work. It does not work well.please help me for this problem.

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>

Why don't you just add the element to the DOM immediately, but have its style set to be hidden, then just show / hide using jQuery? — Blundering Philosopher, Jul 14 '18 at 12:04

score 2 · Answer 1 · answered Jul 14 '18 at 12:06

2

This is because $('#hide-btn') doesn't exists when you are adding click event listener. You should add click listener after adding button or use this:

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

answered Jul 14 '18 at 12:06

Gaiozz

111
3

after append elements , button it does not work well

1 Answers1