在其select方法中更改自动完成选项

时间:2012-09-19 18:53:12

标签: javascript jquery jquery-ui events dom

这是我的代码:

$authorizedRow = $('.authorizedRows').html()

$("#name").autocomplete({
        source: "userlookup.cfm",
        minLength: 3,
        select: function(e, ui) {
            $('#email').last().attr('value',ui.item.mail).attr('disabled','disabled');
            $('#phone').last().attr('value',ui.item.phone).attr('disabled','disabled');
            $('.authorizedRows').last().append('<button class="deleteRow">x</button>');
            $('.deleteRow').button();
            $('#people').append('<div class="authorizedRows">' + $authorizedRow + '</div>').autocomplete( "option", "appendTo", "#name");
        },
        change: function(e, ui) {
            if (a) {
                //not used yet
            }
        }
    });

所以,我要做的是在输入字段上自动完成,当用户选择它时会自动填充其他两个字段。这三个字段(名称,电话和电子邮件)都包含在我的authorizedRows div中。它将在“last”authorizedRows div的末尾添加一个按钮,然后它会在“people”div的末尾附加一个全新的authorizedRows div。

我的问题出现在新行附加后,自动完成将无法在新行的新名称字段中使用。这是因为事件监听器尚未附加到DOM元素。

我试图通过在人员div选择器上使用.autocomplete('option')来解决这个问题,如您所见。它没用。任何想法如何让自动完成在我动态创建的字段上工作?感谢。

1 个答案:

答案 0 :(得分:0)

我使用类选择器而不是id解决了它。

修改

如果有多个ID,jQuery选择器将仅返回第一个,这就是事件未附加到其他动态创建的字段的原因。类的jQuery选择器将为匹配选择器的每个类返回一个数组。