jQuery.on？在 Ajax 之后操作 DOM [重复]

Question

可能重复：
Bind jQuery UI autocomplete using .live()

我似乎无法弄清楚这一点。我相信我将不得不使用 .load() 或 .on() 但我不知道如何使它们中的任何一个工作。

所以我有一个有 3 行的表。当用户填写 3 行时，我想为他们提供更多。

一旦他们填写了最后一行，这个脚本就会被调用。

function addNewRow(id)
{
    var qty = $('#qty' + id).val();
    if (qty > 0)
    {
        $('#quickaddtable').append('<?php echo createRow(($i+1)); ?>');
    }
}

问题是我正在使用自动完成功能，而对于新创建的行，它不起作用。我知道我需要重新加载 DOM，但我只是迷失了如何轻松做到这一点。

$(function(){  

    $(".id").autocomplete({ 
            //My Code
    });  
}); 

我确信这是一个简单的答案，但是几乎所有示例都显示 .on("click",...)

Answer 1

尼尔明白了。我全都看错了。

我需要使用带有自动完成功能的 .on 而不是 addNewRow 函数。

所以我改变了这个

$j(function(){  

    //attach autocomplete  
    $j(document).on("keyup.autocomplete", '.autocomplete', function(){
        $j(this).autocomplete({
                   //My Code
            });
    });

})

感谢大家的帮助。我花了几个小时看这个，几分钟后你们再次回复谢谢。由于尼尔没有发布答案，我有什么办法可以给他信任吗？

Answer 2

这里的问题是当使用$('.id') 选择器时，新行还不存在。当您添加更多行时，匹配“.id”的新元素不会绑定到您之前调用的方法。

我可能只是在插入后重新绑定，而不是尝试绑定到文档 ($(document).on('event'))。所以它会是这样的：

$('#quickaddtable').append( ... );
$('.id').autocomplete("destroy");
$('.id').autocomplete({ ... });