CODEWITHSUNDEEP
jquery
anaximander
anaximander

Reputation: 197

jQuery click event only works once (but fires always!)

Please help a jQuery newby with the following. I have a form and I'm trying to add successive chunks of form fields when an #addMore button is clicked. With the help of this board, I have that working now. But it only works once. I've whittled things down to a minimal case:

<html>
<head>
<title>Reserves Form</title>
<script src="../jquery/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
var chunk = $('.content').clone(true);
 $('#addMore').live('click', function() {
     alert('debug!');
     $('#container').append(chunk);
 });    
});
</script>
<body>
<div id="container">
<p class="content">lorem ipsum blah blah</p>
</div>
<button type="button" id="addMore">Add Another Paragraph</button>
</body>
</html>

When I load the page and click the button, I see the debugging alert and then a clone of the "content" paragraph appears as expected. When I click the button again, I get the alert, but not the new paragraph. Why would one response to the click work, but not the other? And how can I get them both to work?

Upvotes: 2

Views: 3449

Answers (5)

ShankarSangoli
ShankarSangoli

Reputation: 69905

You are appending the same object again and again to the same container so you won't see any difference as if it is not doing anything.

Try this which will clone the first .content element inside the click handler and append it.

$(document).ready(function() {
   $('#addMore').live('click', function() {
       alert('debug!');
       $('#container').append($('.content:first').clone(true));
   });    
});

Alternatively you can try this which will append html string instead of cloned object. In this approach the clone is used only once because string appending can be done any number of times so it is better than previous approach.

$(document).ready(function() {
   var content = $('<div />').append($('.content').clone(true)).html();

   $('#addMore').live('click', function() {
       alert('debug!');
       $('#container').append(content);
   });    

});

Upvotes: 2

Jivings
Jivings

Reputation: 23250

You're only cloning once. After that first assignment you are just referring to the cloned element, thus it's just moving it from where it is to where you want it to be. You can fix it by making chunk a function that returns the cloned element:

var chunk = function() {
   return $('.content').clone(true);
}

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 68902

put the chunk = $('.content').clone(true); inside the click event to be like this 

$(document).ready(function() {

 $('#addMore').live('click', function() {
    var chunk = $('.content').clone(true);
     alert('debug!');
     $('#container').append(chunk);
 });    
});

and something else not related to your question: do you really want to use live?

Upvotes: 4

Mattygabe
Mattygabe

Reputation: 1790

If you want this to occur every time, you need to clone the paragraph inside of your live handler. Your script is appending a one-time clone (cached) copy of that paragraph. Move the clone statement into your click handler for expected results.

Upvotes: 0

Justin Helgerson
Justin Helgerson

Reputation: 25521

A very similar question has already been asked. You need to clone the element every time your handler is executed.

$(document).ready(function() {
 $('#addMore').live('click', function() {
     var chunk = $('.content').clone(true);
     alert('debug!');
     $('#container').append(chunk);
 });    
});

Upvotes: 0

Related Questions