Question

我正在使用JörnZaefferer的jquery自动完成插件，当我克隆自动完成字段时，我似乎无法弄清楚如何使其工作。它几乎可以工作，因为克隆的自动完成字段显示我输入文本时的选项，但我无法选择项目。起初我认为这是一个浏览器兼容性问题，但它发生在FF3和Safari中，所以我猜测有一个我错过的问题。

这是我正在做的一个工作示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Autocomplete Clone Demo</title>
<style>
body {
margin: 40px;
}
.hide_element {
display: none;
}
</style>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
    function setAutocomplete()
    {
        var users = [
          { name: "Fred", id: "1" },
          { name: "Barney", id: "2" },
          { name: "Wilma", id: "3" }
        ];

        $(".user_selector").autocomplete(users, 
            {
                mustMatch: true,
                matchContains: true,
                minChars: 2,
                formatResult: function(row) { return row.name; },
                formatItem: function(row, i, max) { return row.name; }
            }
        );
    }

    var current= 0;

    var addParticipantFields = function() 
    {
        current++;
        $newParticipant = $("#template").clone(true);
        $newParticipant.removeAttr("id");
        $newParticipant.removeClass("hide_element");
        $prefix = "extra" + current;
        $newParticipant.children("div").children(":input").each(function(i) {
            var $currentElem= $(this);
            $currentElem.attr("name",$prefix+$currentElem.attr("name"));
        });
        $newParticipant.appendTo("#participantsField");
        setAutocomplete();
    }

    $(document).ready(function() {
        setAutocomplete();
        $("#addParticipant").live("click", addParticipantFields);

    });
</script>

</head>
<body>
<h1>Test Autocomplete Cloning</h1>
<form id="demo" method="post" action="">
<fieldset id="participantsField">
<label>Participants</label>
<div class="participant">
    <input class="user_selector" name="user" size="30"/>
</div>
</fieldset>

<!-- This is the template for adding extra participants -->
<div class="participant hide_element" id="template">
    <input class="user_selector" name="_user" size="30"/>
</div>

<p><input type="button" id="addParticipant" value="Add Another Participant"></p>
<p><input class="button" type="submit" value="Submit"/></p>
</form>
</body>
</html>

Answer 1

请

$newParticipant = $("#template").clone(true);

喜欢这样

$newParticipant = $("#template").clone();

当您没有在#template上克隆事件时，您的示例适用于我。

Answer 2

首先：

$newParticipant.children("div").children(":input").length == 0

所以这条线没有孩子返回。使用

$newParticipant.children()

代替。它返回1 chield。但钢铁对我不起作用。必须多想想。

JQuery：如何克隆自动填充字段？

2 个答案: