jQuery clone() problem

Question

<script>
function _addcategory() {
    $("#category_div").clone().insertAfter($("#category_div"));
}
</script>
<label for="category">Category</label>
<div id="category_div" style="margin-bottom:5px;">
<select id="category" name="category[]">
<option value="0">None</option>
<option value="3">Item 1</option>
<option value="4">Item 2</option>
<option value="1">Item 3</option>
</select><script>document.write("<input id=\"addrow\" onclick=\"_addcategory();\" style=\"margin-left:5px;\" type=\"button\" value=\"+\" />");</script>
</div>

When I clicked on the button, the page turned blank except the button instead of cloning it. Is this a bug or my mistake? I've spent hours Googling but couldn't find a solution. Anyone know why?

why is the `input` button written in javascript? – Anji Apr 20 '11 at 15:18 — Anji, Apr 20 '11 at 15:18

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Because you're using document.write(). Don't.

There are a lot of other problems with your code, as well. Here's how to make it work:

HTML

<label for="category">Category</label>
<div class="category_div" style="margin-bottom:5px;">
    <select id="category" name="category[]">
        <option value="0">None</option>
        <option value="3">Item 1</option>
        <option value="4">Item 2</option>
        <option value="1">Item 3</option>
    </select>
</div>

<input id="addrow" style="margin-left:5px;" type="button" value="+" />

JavaScript

$(function() {
    function _addCategory() {
        var $categoryDiv = $('div.category_div').last();
        $categoryDiv.clone().insertAfter($categoryDiv);
    }

    $('#addrow').click(_addCategory);
});

http://jsfiddle.net/mattball/zYEUY/

Notes

document.write(): just don't use it.
Element IDs must be unique. The quick solution is to change id="category_div" to class="category_div" and alter the JS accordingly.
You're already using jQuery, so there's no excuse for not writing unobtrusive JavaScript.
Incorrect capitalization: your original code used _addcategory instead of _addCategory, so the onclick callback was undefined.

jQuery clone() problem

1 Answers1

HTML

JavaScript

Notes