将我的自动完成功能绑定到我的添加输入功能

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?) 绑定到

而不是 ，因此它只需要稍加调整即可通过 元素rel="nofollow">.find()，如下所示：

J(document).ready(function(){
    J("#addproffield").click(function(){
    var div = J("<div class='added-field'><input type='text' name='professor[]' size='25' value='' />  <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.find("#professor").autocomplete，而不是 input.professor。

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='' />  <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();
    });
});

我添加了类< code>教授给每个input 元素，因为您不能拥有具有重复 ID 的有效 HTML（并且 jQuery 不处理重复 ID）。

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

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

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

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