当使用jQuery克隆时,试图将jQuery自动完成应用于表中的多个行时,我遇到了一个问题。“自动完成”在第一行上工作,但在向表中添加其他行时无法工作。到目前为止,我有以下几点:
HTML表格
<table class="table" cellspacing="0" id="myTable">
<tr>
<th width="40%">Item</th>
<th width="60%">Description</th>
</tr>
<tr>
<td>input name="product_title" id="product_title" type="text"><td>
<td><textarea name="product_description" id="product_description"></textarea></td>
</tr>
</table>
<input type="button" value="Add Row" onclick="javascript:addRow()">
克隆脚本:
function addRow(){
$('#myTable tr:last').clone(true).insertAfter('#myTable tr:last');
$('#myTable tr:last input').val("");
$('#myTable tr:last input:first').focus();
}
自动完成脚本:
$().ready(function() {
$("#product_title").autocomplete(products, {
width: 380,
matchContains: "word",
formatItem: function(row) {
return row.title;
}
});
$('#product_title').result(function(event, data) {
$('#product_description').val(data.description);
});
});
有没有人知道是否有一种(容易)的方式来修改上面的代码来使这个工作?
发布于 2018-06-11 13:13:26
var $table;
$(function() {
$table=$('#myTable');
var $existRow=$table.find('tr').eq(1);
/* bind to existing elements on page load*/
bindAutoComplete($existRow);
});
function addRow(){
var $row=$table.find('tr:last').clone(true);
var $input=$row.find('input').val("");
$table.append($row);
bindAutoComplete($row );
$input.focus();
}
function bindAutoComplete($row ){
/* use row as main element to save traversing back up from input*/
$row.find(".product_title").autocomplete(products, {
width: 380,
matchContains: "word",
formatItem: function(row) {
return row.title;
}
});
$row.find('.product_title').result(function(event, data) {
$row.find('.product_description').val(data.description);
});
}
发布于 2018-06-11 14:59:53
Charlietfl的帖子解决了我的问题,我唯一要做的改变就是更换:
var $row=$table.find('tr:last').clone(true);
var $row=$table.find('tr:last').clone();
移除true
。
https://stackoverflow.com/questions/-100004833
复制相似问题