單擊時，將元素克隆到變量並將其追加到另一個元素

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

追加每個克隆元素自身的股利。然後將所有div添加到行中。

Due to a bug，你必須在克隆的選擇框強制值

$(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); 
 
    }); 
 
});

.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>

---

最後一件事。您不應該通過id=識別元素，因爲這些元素在整個頁面中都是唯一的。嘗試重寫你的代碼，以便你可以使用選擇器的類。例如：

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

Answer 2

您只需將克隆的對象。

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

 

 
    }); 
 
});

.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 3

我不完全瞭解你需要什麼，但克隆返回一個對象，這就是爲什麼追加到一個字符串，將返回到[對象的對象。也許你可以使用outerHTML。

$(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); 
 
    }); 
 
});

.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>