Javascript 如何使jquery引用动态html元素

下面是我的脚本的一部分，它动态地添加html输入文本框。这些输入框中的每一个都应该是一个autofil文本框。这是我正在使用的代码-。演示在这里-

对于上面的示例，它只是一个输入框，但我的代码允许动态输入文本框（即用户单击按钮和更多弹出窗口）

我的问题是，我不知道如何修复jquery，使其对于输入文本框id是动态的。我如何使其动态，以便fill（）将数据输出到foo01、foo11、foo21等，而不仅仅是foo11

<script src="jquery-1.2.1.pack.js" type="text/javascript">
function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup


function fill(thisValue) {
    $('#foo11').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
}

</script>

<script type="text/javascript">
var x = 1;

function add() {
    var fooId = "foo";

    for (i=1; i<=2; i++)) {

        var element = document.createElement("input");

        element.setAttribute("type", fooId+x+i);
        element.setAttribute("name", fooId+x+i);
        element.setAttribute("id", fooId+x+i);

        if(i==1){
              element.setAttribute("onkeyup", "lookup(this.value);");                          
              element.setAttribute("onblur","fill();");
              element.setAttribute("value", "First name");
        }
        if(i==2){
               element.setAttribute("value", "Last name");
        }


        var foo = document.getElementById("fooBar");
        foo.appendChild(element);
   }
   x++;
}
</script>

如果你点击Add，你会得到

Text Box (foo00)               Text Box
Text Box (foo10)               Text Box
Add

如果我点击文本框（0,0）并开始输入“Lo”，一个文本框将弹出London、Logon等。然后如果你点击“London”，只有（0,0）将被更新，现在将是“London”，即

现在，我点击伦敦（foo10）下方的文本框，开始输入“Ro”，一个文本框将弹出罗马、罗马尼亚等。我点击罗马，只有foo10应该更新，如下所示：

Text Box (foo00)               Text Box
Add 

London                  Text Box
Rome                    Text Box
Add

希望这对下面的问题有所帮助

在此示例之前，我从未使用过jquery。我使用jQuery1.2.1，因为示例就是这么说的。我需要研究JQuery的更新版本

*****************编辑2***********************

我没有意识到rpc.php文件名为fill（），我认为这就是问题所在。我已经更新了上面的代码，包括rpc.php和调用它的jquery。

在下面的函数中，您已经硬编码了id

foo11

function fill(thisValue) {
    $('#foo11').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
}

相反，您可以使用

this

操作符访问调用

fill（）

方法的特定文本框

function fill(this) {
    $(this).val(thisValue); // will access the current element but not sure where you are getting the value 
    setTimeout("$('#suggestions').hide();", 200);
}

然后像这样更改

onblur

element.setAttribute("onblur","fill(this);");

在阅读了您更新的问题后，我尝试制作一个示例应用程序，但不幸的是，如果不做太多更改，我无法使其正常工作。问题是，您用于创建自动完成的方法的工作方式很难使其与动态添加的HTML一起工作。这是我的两个选择

在rpc.php代码中进行一些更改，只将值作为数组发出，并在客户端上创建HTML

由于您已经在使用jQuery，请尝试jQuery自动完成 您可以找到有关自动完成和 我已经使用jQuery自动完成为您制作了一个示例。检查这个

---

您是用一个值源填充所有这些输入，还是每个输入都有不同的值？让我澄清一下：您希望当其中一个

n

输入模糊时，所有其他输入都用相同的数据填充？为什么不将

输入的名称作为参数传递到
fill
函数中？类似于：
element.setAttribute（“onblur”、“fill”（+fooId+x+i+））；”
和
函数fill（name，thisValue）{…
。如果您想独立完成每一项操作。如果您想一次完成所有操作，请在它们上设置
class=“foos”
，然后使用以下jquery选择器：
$（'.foos'））
还有，你为什么要使用jQuery 1.2.1？@Moshe Katz，尝试过，但没有效果。你能给我更多的细节吗，因为我对jQuery很陌生，可能没有遗漏什么。尝试过，但没有成功。我是jQuery的绝对初学者，#foo11是其中一个文本框的id，“this”不是必须引用id而不仅仅是“this”？我对我的答案进行了编辑，请参见。在jQuery中
$（）
采用CSS选择器（如id、className等）或DOM元素（如此）并返回一个可用于设置值的jQuery对象。顺便说一句，您是否在
thisValue
中获得了任何信息？抱歉，comet，我已经更新了我的代码以反映rpc.php，我没有意识到它被称为fill（）。这就是我认为的问题所在，通过此调用。
function fill(this) {
    $(this).val(thisValue); // will access the current element but not sure where you are getting the value 
    setTimeout("$('#suggestions').hide();", 200);
}

element.setAttribute("onblur","fill(this);");