0

我在单击按钮时使用 jquery 动态创建文本框。

<table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="lblCustName">
                </div>
            </td>
            <td>
                <div id="lblRemove">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="Add" id="AddRow" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit" id="SaveCustomers" />
            </td>
        </tr>
        </table>

     <script type="text/javascript" language="javascript">
        $(document).ready(function() {
           //validate post form
            $("#CustomersForm").validate({ ignore: ":not(:visible)" });
           //Initialize the dynamic id
           _DynId = 1;
           //Click Event for Customers
            $('#AddRow').click(function(e) {
                $('#lblCustName').append('<div id="lblCustName' + _DynId + '" style="height:20px;padding-left:10px;">' + '<input type="text" name="CustName" id="CustName' + _DynId + '" class="required" value="" title="*" />');
                $('#lblRemove').append('<div id="lblRemove' + _DynId + '" style="height:20px;padding-left:10px;">' + '<img src="../../Content/Images/delete_icon.gif" onclick=Remove("' + _DynId + '"); title="Remove" id="iRemove' + _DynId + '"></img>');
                _DynId += 1;
            });
 </script>

我正在尝试为客户动态添加文本框。这是添加客户以进行报告处理的功能的示例 html，... 我需要为文本框提供自动完成选项。

我为此使用了以下脚本：

$.getJSON("/User/GetAllCustomers/?t=" + new Date(), {},
         function(data) {
             if (data != null) {
                 $("input:text[name=CustName]").autocomplete(data, { mustMatch: false, matchContains: 4, max: 50,
                     formatItem: function(row) {
                         if (row.CustomerName!= "") {
                             return row.CustomerName;
                         }
                     },
                     formatResult: function(row) {
                         return row.CustomerName;
                     }
                 }).result(function(e, row) {
                    //do something
                 });
             }
         });

自动完成功能不适用于动态添加的控件。

我正在尝试将动态添加的控件注册到表单的任何可能性，以便自动完成功能适用于动态添加的控件

4

1 回答 1

1

问题在于，当您绑定该自动完成功能时，它会绑定到运行该函数时与选择器匹配的字段。如果您稍后添加也匹配的内容，它将不会自动绑定。

对于基本的 jQuery 事件，有一个Live绑定可以让您自动执行此操作，但自动完成无法通过此操作 - 基本上您唯一的选择是每次添加新文本字段时绑定一个新的自动完成

EG：添加到 AddRow 函数：

$("#lblCustName" + _DynId + " input[name=CustName]").autocomplete(...);

（显然用你想要的参数替换 ...）

您可能希望将从 web 服务中拉回的数据对象放在全局变量中以支持这一点，并且可能与自动完成选项相同（只是为了避免代码重复）。

于 2009-11-28T11:40:40.637 回答