Duplicate input on click, insert before clicked element - jQuery

Question

I have markup like so:

$('label.duplicate').click(function(e) {
        e.preventDefault();
        var _for = $(this).attr('for');
    
        $('input[name="' + _for + '"]').clone().insertBefore($(this));
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input_one[]">
    <label class="duplicate" for="input_one[]">Add another car</label>

This doesn't duplicate, or provide an error so I don't know why this is not working?

Yeah, I'm not sure whats blocking it my end - I see it working on here. Bizzare. — Ryan Hipkiss
– Ryan Hipkiss, Commented Oct 27, 2016 at 10:56
is the label generated dynamically? That might be the problem if the on click listener executes prior to appending the label in the page — Alexandru Severin
– Alexandru Severin, Commented Oct 27, 2016 at 14:42

Zorken17 · Accepted Answer · 2016-10-27 10:54:56Z

1

It is working, but you need to wait for the dom-structur to load before you run you code. Put everything inside documet.ready like this:

$(document).ready(function() {
  $('label.duplicate').click(function(e) {
    e.preventDefault();
    var _for = $(this).attr('for');

    $('input[name="' + _for + '"]').clone().insertBefore($(this));
  });
})

Or insert your code dead last on you page. Read more about this here: https://learn.jquery.com/using-jquery-core/document-ready/

edited Oct 27, 2016 at 10:54

answered Oct 27, 2016 at 10:53

Zorken17

1,8861 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Hipkiss Over a year ago

Yeah, after the edits I see it working on here. I have it run in a document ready.

Sami · Accepted Answer · 2016-10-27 10:56:00Z

0

<input type="text" name="input_one[]">
<label class="duplicate" for="input_one[]">Add another car</label>

just .duplicate is enough to duplicate:

$(function(){ 
$('.duplicate').click(function(e) {
    e.preventDefault();
    var _for = $(this).attr('for');

    $('input[name="' + _for + '"]').clone().insertBefore($(this));
  });
}

answered Oct 27, 2016 at 10:56

Sami

3,8204 gold badges19 silver badges30 bronze badges

Collectives™ on Stack Overflow

Duplicate input on click, insert before clicked element - jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related