Question

我有一个表单，我想设置它，以便当用户在输入中输入/选择值并单击“添加”按钮时，它将克隆每个输入/选择框，将它们分配给变量然后将它们附加到下面的另一个元素。我目前所拥有的只是返回[object Object]而不是克隆元素。我哪里错了？

$(function() {
  $('button').click(function() {
    var $name = $('#name').clone(),
        $email = $('#email').clone(),
        $package = $('#package').clone(),
        $newRow = '<div class="name">' + $name + '</div><div class="email">' + $email + '</div><div class="package">' + $package + '</div>';
        
    $('.row').append($newRow);
  });
});

.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

Answer 1

您只需要附加克隆的对象。

＆＃13;

$(function() {
  $('button').click(function() {
    var $name = $('#name').clone(),
        $email = $('#email').clone(),
        $package = $('#package').clone();
     
        
    $('.row').append($name);  
    $('.row').append($email);  
    $('.row').append($package);


  });
});

＆＃13;

.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

＆＃13;

Answer 2

将每个克隆元素附加到自己的div。然后将所有div添加到行中。

Due to a bug，您必须在克隆的选择框上强制值

＆＃13;

$(function() {
  $('button').click(function() {
    var $name = $('<div class="name"></div>').append($('#name').clone()),
        $email = $('<div class="email"></div>').append($('#email').clone()),
        $package = $('<div class="package"></div>').append($('#package').clone());
        $package.find('#package').val($('#package').val());
    $('.row').append($name, $email, $package);
  });
});

＆＃13;

.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

＆＃13;

最后一件事。您不应该通过id=识别元素，因为这些元素在整个页面中都是唯一的。尝试重写代码，以便可以使用选择器类。例如：

<input class="i_name" />
...
$('.i_name').clone()

Answer 3

我不完全明白你需要什么，但是克隆返回一个对象，这就是为什么追加到字符串将返回到[object Object]的原因。也许你可以使用outerHTML。

＆＃13;

$(function() {
  $('button').click(function() {
    var $name = $('#name').clone();
        $email = $('#email').clone();
        $package = $('#package').clone();
        $newRow = '<div class="name">' + $name[0].outerHTML + '</div><div class="email">' + $email[0].outerHTML + '</div><div class="package">' + $package[0].outerHTML + '</div>';
        
    $('.row').append($newRow);
  });
});

＆＃13;

.row {
  display:table-row;
}
  .row > div {
    display:table-cell;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="email" />
<select id="package">
  <option value="one">Package One</option>
  <option value="two">Package Two</option>
  <option value="three">Package Three</option>
</select>

<button>ADD ROW</button>

<div class="row">

</div>

＆＃13;

单击时，将元素克隆到变量并将其附加到另一个元素

3 个答案: