将我的自动完成绑定到我的添加输入函数

Question

我一直试图将两个函数绑定在一起但没有成功：我希望在用户单击“添加”时添加的输入字段上运行自动完成功能。我可以让这两个单独运行，并发现我应该绑定这两个函数......但作为一个菜鸟，我几乎可以肯定我做错了。任何帮助表示赞赏！

这里是自动完成代码：

 var J = jQuery.noConflict();
 J(document).ready(function(){
 J('#professor').autocomplete({source:'autocomplete.php', minLength:1});
 });

这里是添加输入代码：

    var J = jQuery.noConflict();
J(document).ready(function(){
J("#addproffield").click(function(){
var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
J("#addprof").append(input);
});
J(".remove-btn").live('click',function() {
J(this).parent().remove();
});
});

这是我绑定两者的失败尝试：

   var J = jQuery.noConflict();
J(document).ready(function(){
J("#addproffield").click(function(){
var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
J("#addprof").append(input);
input.professor({
     source:'autocomplete.php', minLength:1
    });
});
J(".remove-btn").live('click',function() {
J(this).parent().remove();
});
    });

谢谢！！

Answer 1

您尝试将 autocmplete (.professor?) 绑定到 <div> 而不是 <input>，因此只需稍作调整即可通过 <input> 实际成为 <input> 元素@，像这样：

J(document).ready(function(){
    J("#addproffield").click(function(){
    var div = J("<div class='added-field'><input type='text' name='professor[]' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
    J("#addprof").append(div);

    div.find("input").autocomplete({
        source:'autocomplete.php', minLength:1
    });
});

请注意上面的 html 更改，id 现在不需要也不应该存在，因为多次使用同一个 ID 是无效的。

Answer 2

你很接近，而不是input.professor，请在上面的代码中尝试input.find("#professor").autocomplete。

find 方法基本上是在元素内搜索选择器（在本例中为 id）。

Answer 3

jQuery 中的live 函数非常适合在 DOM 更改时动态地将特定事件处理程序应用于选定元素，但没有（据我所知）在选定元素上执行/调用函数的方法 设置 事件处理程序（如本题中的autocomplete 函数）...

所以，你需要做这样的事情：

var J = jQuery.noConflict();

J(document).ready(function(){
    J("#addproffield").click(function(){
        var input = J("<div class='added-field'><input type='text' name='professor[]' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
        J("#addprof").append(input);

        //Next line is inefficient and requires the extra class attribute
        //J(".professor").unbind().autocomplete({source:'autocomplete.php', minLength:1});

        //This is better:
        input.find("input").autocomplete({source:'autocomplete.php', minLength:1});
    });

    J(".remove-btn").live('click',function() {
        J(this).parent().remove();
    });
});

我已将 professor 类添加到每个 input 元素中，因为您不能拥有具有重复 ID 的有效 HTML（并且 jQuery 不处理重复 ID）。

我还更改了input.professor... 行，以便使用class="professor" 从所有inputs 中删除事件（单击、鼠标悬停等），然后将自动完成功能（再次）应用于所有选定的元素.

您也许可以执行以下操作，但我没有尝试过：

var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' class='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>").autocomplete({source:'autocomplete.php', minLength:1});
J("#addprof").append(input);

编辑：采纳了 Nick 的建议/答案并更新了上面的代码，并删除了 id 和 class 属性