jQuery clone（）问题

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>

当我点击按钮时，页面变为空白，除了按钮而不是克隆它。这是一个错误还是我的错误？我花了几个小时谷歌搜索，但找不到解决方案。谁知道为什么？

Answer 1

因为您正在使用document.write()。不。

---

您的代码还存在许多其他问题。以下是如何使其工作：

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/

注释

• document.write()： just don't use it.
• 元素ID必须是唯一的。快速解决方案是将id="category_div"更改为class="category_div"并相应地更改JS。
• 你已经在使用jQuery了，所以没有理由不写unobtrusive JavaScript。
• 大写不正确：您使用的原始代码为_addcategory而不是_addCategory，因此onclick回调为undefined。