Javascript jQueryUIAutoComplete小部件-每次向表中添加行时都尝试使用它

我对网络开发完全陌生，这是我在网站上的第一个问题

我正在用Joomla试验jQuery自动完成小部件（因此jQuery调用），并通过数据库连接使其工作，用于表中的第一个文本行输入txtRow1。此输入成功触发股票名称的自动完成小部件

当我使用“添加”行按钮时，自动完成不再适用于下一行txtRow2。如何使表上所有txtRow输入行的autocomplete函数启动

我尝试使用id“start with”表达式，因为所有表输入都将被称为txtRowX，但它仍然只适用于第一个表，txtRow1

正如您可能知道的，所有代码都来自web教程，是其他人的作品

谢谢你抽出时间

更新：感谢Griegs链接到另一个问题，以下代码正在运行，但我不知道为什么：

   jQuery(function(){
   jQuery('[id^="txtRow"]').live('keyup.autocomplete', function(){
   jQuery(this).autocomplete({
    source : "stockdata.php",
    minLength: 2
    });
    });
    });

HTML：

<script type="text/javascript">
jQuery(function() {

    jQuery('[id^="txtRow"]').autocomplete({
            source: "stockdata.php",
            minLength: 2
        });
    });

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;

el.onkeypress = keyPressTest;
cellRight.appendChild(el);

// select cell
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'selRow' + iteration;
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
cellRightSel.appendChild(sel);

}
</script>

<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="3">Stocks</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1" id="txtRow1" size="40" /></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
</select>
</td>
</tr>
</table>
</form>

jQuery（函数（）{
jQuery（'[id^=“txtRow”]'）。自动完成({
来源：“stockdata.php”，
最小长度：2
});
});
函数addRowtTable（）
{
var tbl=document.getElementById（'tblSample'）；
var lastRow=tbl.rows.length；
//如果表中没有标题行，则迭代=lastRow+1
var迭代=最后一行；
变量行=tbl.insertRow（最后一行）；
//左室
var cellLeft=行插入单元格（0）；
var textNode=document.createTextNode（迭代）；
cellLeft.appendChild（textNode）；
//右室
var cellRight=行insertCell（1）；
var el=document.createElement（'input'）；
el.type='text'；
el.name='txtRow'+迭代；
el.id='txtRow'+迭代；
el.size=40；
el.onkeypress=按键测试；
cellRight.appendChild（el）；
//选择单元
var cellRightSel=行插入单元格（2）；
var sel=document.createElement（'select'）；
sel.name='selRow'+迭代；
选择选项[0]=新选项（'text zero'，'value0'）；
选择选项[1]=新选项（“文本一”、“值一”）；
cellRightSel.appendChild（sel）；
}

验证提交

股票
1.
零号文本
正文一

php文件：

<?php
$dbhost = 'host';
$dbuser = 'user';
$dbpass = 'pass';
$dbname = 'database';

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);

$return_arr = array();

/* If connection to database, run sql statement. */
if ($conn)
{
$fetch = mysql_query("SELECT * FROM stocknameticker where stock_name like '%" . mysql_real_escape_string($_GET['term']) . "%'"); 

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['s_id'];
    $row_array['value'] = $row['stock_name'];
    $row_array['abbrev'] = $row['stock_ticker'];

    array_push($return_arr,$row_array);
}
}

mysql_close($conn);

echo json_encode($return_arr);

?>

---

处理Dynamicly创建的元素时，需要使用live jquery关键字

$('[id^="txtRow"]').live("autocomplete", function(){
//your code here
});

编辑

这可能也有帮助

在网页上动态创建元素时，jQuery不会自动将其绑定到任何事件

所以当你有

$(".MyElement").click(...

单击事件将仅应用于加载页面时出现的元素

如果您现在添加一个新元素，并希望对其应用连击，则需要执行以下操作：

$(".MyElement").live("click", function(...

---

这指示jQuery扫描文档并将事件附加到新创建的元素。

处理动态创建的元素时，需要使用live jQuery关键字

$('[id^="txtRow"]').live("autocomplete", function(){
//your code here
});

编辑

这可能也有帮助

在网页上动态创建元素时，jQuery不会自动将其绑定到任何事件

所以当你有

$(".MyElement").click(...

单击事件将仅应用于加载页面时出现的元素

如果您现在添加一个新元素，并希望对其应用连击，则需要执行以下操作：

$(".MyElement").live("click", function(...

---

这指示jQuery扫描文档并将事件附加到新创建的元素。

Matthew，欢迎使用SO。这样做的方式是，如果给出的答案解决了您遇到的问题，您应该将其标记为正确答案，以便该问题的后续观众可以看到解决方案。不要忘了查看

代表

，我倾向于使用它多于

直播

。看看为什么：马克，谢谢你的链接。不幸的是，当我点击这些示例时，它们在我的ff浏览器中都不起作用。这样做的方式是，如果给出的答案解决了您遇到的问题，您应该将其标记为正确答案，以便该问题的后续观众可以看到解决方案。不要忘了查看

代表

，我倾向于使用它多于

直播

。看看为什么：马克，谢谢你的链接。不幸的是，当我点击这些示例时，它们在我的ff浏览器中都不起作用。非常感谢您抽出时间回复。我对论坛中对无知者的巨大态度感到震惊。哦，回答失败了。然而，我想说的是，我不知道你写的短语应该是什么。我试过几种组合，但它们对我不起作用。我很抱歉，但我需要一个非常直接的观点。我认为这对我来说是一个“括号”问题。试图找出哪对括号应该与函数的哪一部分匹配。现在，在粘贴到解决方案中以及尝试将所有括号配对时，开发人员控制台中出现了“缺少变量名”错误。错误出现在“source:“stockdata.php”行，无论我在哪里尝试关闭语句括号。我现在觉得很傻，因为你帮了我这么多忙。是的，我认为你需要阅读我发送的链接，而不是一字不差地实现我的代码。非常感谢你花时间回复。我对论坛中对无知者的巨大态度感到震惊。哦，回答失败了。然而，我想说的是，我不知道你写的短语应该是什么。我试过几种组合，但它们对我不起作用。我很抱歉，但我需要一个非常直接的观点。我认为这对我来说是一个“括号”问题。试图找出哪对括号应该与函数的哪一部分匹配。现在，在粘贴到解决方案中以及尝试将所有括号配对时，开发人员控制台中出现了“缺少变量名”错误。错误出现在“source:“stockdata.php”行，无论我在哪里尝试关闭语句括号。我现在觉得很傻，因为你帮了我很多忙。是的，我认为你需要阅读我发送的链接，而不是一字不差地实现我的代码。