CODEWITHSUNDEEP
javascriptjqueryhtml
thank_you
thank_you

Reputation: 11107

Insert same html into element multiple times with jQuery

I want the user to click on a button and then have some html pop into an element. I did so and it works but it only works once. If they click the button again, nothing happens. I thought using empty() would fix the problem but it doesn't. What's wrong with my code.

<script type="text/javascript" >

$(document).ready( function() {

   $('#button').on('click', function () {

     $('#ul').html('<li>testing testing</li>').hide(1000, function() {

        $(this).empty();    

     });    

   });

});

</script>

<input type="button" value="click me" id="button" />

<ul id="ul">

</ul>

Upvotes: 1

Views: 1423

Answers (5)

MikeB
MikeB

Reputation: 2452

$("#button").click(function(){ 
    $("#ul").append("testing testing");
});

Upvotes: 2

Blaise Swanwick
Blaise Swanwick

Reputation: 1755

When you do a .hide() you set the CSS selector "display" = "NONE" You need to change it to something like this:

$('#ul').html('<li>testing testing</li>').hide(1000, function() {
  $(this).empty();
  $(this).show();
});

Upvotes: 1

epascarello
epascarello

Reputation: 207511

jQuery('<li>testing testing</li>').appendTo('#ul').hide(1000, function() {
    $(this).remove();    
 });

Upvotes: 1

Farnabaz
Farnabaz

Reputation: 4066

as you want to pop html each time you click on button you should use append 

$('#ul').append('<li>testing testing</li>');

see append

Upvotes: 2

David Hellsing
David Hellsing

Reputation: 108500

The element is hidden the second time you click the button. You can do:

$('#ul').show().html('...

http://jsfiddle.net/KXkgZ/

Upvotes: 3

Related Questions