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

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...行，以便使用input从所有class="professor"中删除事件（onclick，mouseover等），然后再次应用自动完成功能所有选定的元素。

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

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);

编辑：接受了尼克的建议/答案，并更新了上述代码并移除了id和class属性

Answer 2

您是在尝试将自动填充（.professor？）绑定到<div>而不是<input>，因此只需稍加调整就可以{{1 }}元素通过.find()，像这样：

<input>

注意上面的html更改，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 }); });现在不需要存在，因为多次使用相同的ID无效。

Answer 3

您已关闭，而不是input.professor，请在上面的代码中尝试input.find("#professor").autocomplete。

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

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

3 个答案: