javascript - jQuery clone() input value function - Stack Overflow

admin管理员组

文章数量:1319006

I have created a clone function to clone a selection of elements. I have managed to get the basics of the clone function working. CLICK HERE I have a bug in this function. When the user types text into the input field, it clones the last inputted text and changes the text value for all cloned items.

$('.add-item').on('click', function() {
  var value = $('input').val();
  if ($('#items-field').val()) {
    $('.list-items p').text(value)
    $('.list-items:first').clone().appendTo("#items").addClass('isVisible');
    $('input').val('');
    event.preventDefault();
  }
})

Does anyone know how this problem can be resolved?

I have created a clone function to clone a selection of elements. I have managed to get the basics of the clone function working. CLICK HERE I have a bug in this function. When the user types text into the input field, it clones the last inputted text and changes the text value for all cloned items.

$('.add-item').on('click', function() {
  var value = $('input').val();
  if ($('#items-field').val()) {
    $('.list-items p').text(value)
    $('.list-items:first').clone().appendTo("#items").addClass('isVisible');
    $('input').val('');
    event.preventDefault();
  }
})

Does anyone know how this problem can be resolved?

• javascript
• jquery

Share Improve this question Follow edited Dec 22, 2015 at 16:28 thanksd 55.7k2323 gold badges165165 silver badges154154 bronze badges asked Dec 22, 2015 at 16:23 NewBoyNewBoy 1,14422 gold badges1717 silver badges4242 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Clear the value of inputs after you clone(). You can use the find() method to get all the inputs inside the cloned item.

var c = $('.list-items:first').clone();
c.find("input").val("");  // find all inputs and clear
c.appendTo("#items").addClass('isVisible');

Here is a working jsbin sample

Also, In your code, you are reading the input value and setting it to all the p tags's text. You should be setting it only to the p tag of the cloned div.

$(function(){

  $('.add-item').on('click', function(e) {
     event.preventDefault();
     var value = $('#items-field').val();
     if (value!="") {

       var c = $('.list-items:first').clone();
       c.find("input").val("");  // find all inputs and clear
       c.appendTo("#items").addClass('isVisible');

       c.find("p").text(value);

     }
  });

}) 

Here is a working sample of the plete solution

本文标签： javascriptjQuery clone() input value functionStack Overflow