SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery clone method

    Hi all,
    I want to display a text field with a plus sign next to it. The user can then click the plus sign which duplicates the text field on a new line with another plus sign. The user can then continue doing this.

    Ive had an initial stab at the code, and it clones the first text field fine, but when you click on the second plus sign, it creates 2 more text fields, and then clicking on one of the new plus signs creates 4 new text fields, the next one creates 8 new text fields etc...!

    How can I have this so only one text field is created each time the plus sign is clicked.

    My code is:

    js:
    Code:
    $(document).ready(function() { 
             $(".add-but").click(function () {
                $('.single-code').first().clone(true).attr('class','single-code').insertAfter(".single-code").last();      
            });
          });

    html:
    Code HTML4Strict:
    <div class="single-code">
    <div class="controls">
    <input type="text"><a href="#" class="add-but"><img src="img/add.png" width="16" height="16"></a>
    </div>
    </div>
    Last edited by spikeZ; Oct 8, 2012 at 05:54.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •