如何将.delegate添加到此外部.autocomplete函数？ [英] How would I add .delegate to this external .autocomplete function?
本文介绍了如何将.delegate添加到此外部.autocomplete函数？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我今天刚学会了.delegate，我知道我可以用于我想要的东西，但我不知道如何在这里添加它。
I just learned about .delegate today, and I know I can be used for what I want but I'm not sure how I would add it here.
添加的每一行都需要我能够使用.autocomplete它们都使用相同的数据。
Each line when added needs to me able to use .autocomplete they all use the same data.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#field1').val("");
$('#field2').val("");
$('#field3').val("");
$('#field4').val("");
$("#field1").autocomplete({
source: "PRODUCT.ORDER.QUERY.php",
minLength: 2,
autoFocus: true,
select: function(event, ui) {
$('#field1').val(ui.item.field1);
$('#field2').val(ui.item.field2);
$('#field3').val(ui.item.field3);
$('#field4').val(ui.item.field4);
}
});
});
</script>
</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>FIELD 1</td>
<td>FIELD 2</td>
<td>FIELD 3</td>
<td>FIELD 4</td>
<td>QTY</td>
</tr>
</table> <hr>
<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td>
<td><input name="field2" type="text" id="field2" size="15"></td>
<td><input name="field3" type="text" id="field3" size="15"></td>
<td><input name="field4" type="text" id="field4" size="15"></td>
<td><input name="qty" type="text" id="qty" size="15" tabindex="2"></td>
<td><button class="removeLine">Delete</button></td>
</tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->
<script type="text/javascript">
$("#orderForm").delegate(".removeLine", "click", function () {
$(this).closest('.orderLine').remove();
});
<!-- This removes all newLine table rows -->
$("#removeAll").click(function () {
$('.orderLine').remove();
});
<!-- ADDS the 'newLine' table rows -->
$("#addLine").click(function () {
$('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="15" tabindex="1"></td><td><input name="field2" type="text" id="field2" size="15"></td><td><input name="field3" type="text" id="field3" size="15"></td><td><input name="field4" type="text" id="field4" size="15"></td><td><input name="qty" type="text" id="qty" size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
});
</script>
</body>
</html>
工作1/2方式。不是我可以再次使用.autocomplete但它不对。我再次填充所有字段。
Working 1/2 wayish. Not I can use the .autocomplete again but its not right. I populates all the fields again.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");
$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
$(this).autocomplete({
source: "PRODUCT.ORDER.QUERY.php",
minLength: 2,
autoFocus: true,
select: function(event, ui) {
$('.field1').val(ui.item.field1);
$('.field2').val(ui.item.field2);
$('.field3').val(ui.item.field3);
$('.field4').val(ui.item.field4);
}
});
});
});
</script>
</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>FIELD 1</td>
<td>FIELD 2</td>
<td>FIELD 3</td>
<td>FIELD 4</td>
<td>QTY</td>
</tr>
</table> <hr>
<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input class="field1" type="text" size="15" tabindex="1"></td>
<td><input class="field2" type="text" size="15"></td>
<td><input class="field3" type="text" size="15"></td>
<td><input class="field4" type="text" size="15"></td>
<td><input class="qty" type="text" size="15" tabindex="2"></td>
<td><button class="removeLine">Delete</button></td>
</tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->
<script type="text/javascript">
$("#orderForm").delegate(".removeLine", "click", function () {
$(this).closest('.orderLine').remove();
});
<!-- This removes all newLine table rows -->
$("#removeAll").click(function () {
$('.orderLine').remove();
});
<!-- ADDS the 'newLine' table rows -->
$("#addLine").click(function () {
$('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input class="field1" type="text" size="15" tabindex="1"></td><td><input class="field2" type="text" size="15"></td><td><input class="field3" type="text" size="15"></td><td><input class="field4" type="text" size="15"></td><td><input class="qty" type="text" size="15" tabindex="2"></td><td><button class="removeLine">Delete</button></td></tr></table>');
});
</script>
</body>
</html>
工作示例！
WORKING EXAMPLE!
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('.field1').val("");
$('.field2').val("");
$('.field3').val("");
$('.field4').val("");
$("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
$(this).autocomplete({
source: "PRODUCT.ORDER.QUERY.php",
minLength: 2,
autoFocus: true,
select: function(event, ui) {
$(this).closest('tr').find('.field1').val(ui.item.field1);
$(this).closest('tr').find('.field2').val(ui.item.field2);
$(this).closest('tr').find('.field3').val(ui.item.field3);
$(this).closest('tr').find('.field4').val(ui.item.field4);
}
});
});
});
</script>
</head>
<body>
<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>
<hr>
<form action="<?php echo $PHP_SELF;?>" method="post" id="orderform">
<table width="90%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>FIELD 1</td>
<td>FIELD 2</td>
<td>FIELD 3</td>
<td>FIELD 4</td>
<td>QTY</td>
</tr>
</table> <hr>
<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input class="field1" type="text" size="15" tabindex="1"></td>
<td><input class="field2" type="text" size="15"></td>
<td><input class="field3" type="text" size="15"></td>
<td><input class="field4" type="text" size="15"></td>
<td><input class="qty" type="text" size="15" tabindex="2"></td>
<td><button class="removeLine">Delete</button></td>
</tr>
</table>
</div>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->
<script type="text/javascript">
$("#orderForm").delegate(".removeLine", "click", function () {
$(this).closest('.orderLine').remove();
});
<!-- This removes all newLine table rows -->
$("#removeAll").click(function () {
$('.orderLine').remove();
});
<!-- ADDS the 'newLine' table rows -->
$("#addLine").click(function () {
$('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><input class="field1" type="text" size="15" tabindex="1"></td> <td><input class="field2" type="text" size="15"></td> <td><input class="field3" type="text" size="15"></td> <td><input class="field4" type="text" size="15"></td> <td><input class="qty" type="text" size="15" tabindex="2"></td> <td><button class="removeLine">Delete</button></td> </tr></table>');
});
</script>
</body>
</html>
推荐答案
假设这些字段有一个字段类，这样的事情应该有效。
Assuming the fields have a class of "field", something like this should work.
$("body").delegate(".field:not(:ui-autocomplete)","focus",function(){
$(this).autocomplete(options);
});
编辑：我没有意识到代码还有更多，所以我没看到下面的HTML。感谢roselan指出这一点。重复ID问题肯定会成为一个问题，但我发布的委托代码应该是一个很好的起点，可以找出如何动态地将插件应用于添加了ajax的元素。之后，您只需克服重复的ID问题。
I didn't realize that there was more to the code, so i didn't see the html below. Thank roselan for pointing that out. The duplicate ID issue will definitly be a problem, but the delegate code I posted should be a good starting point to figure out how to dynamically apply a plugin to an element that gets added with ajax. After that you just have to overcome the duplicate id issue.
编辑以回复评论：
此行和类似的行
$('.field1').val(ui.item.field1);
需要
$(this).closest('tr').find('.field1').val(ui.item.field1);
$(this).closest('tr').find('.field2').val(ui.item.field2);
$(this).closest('tr').find('.field3').val(ui.item.field3);
$(this).closest('tr').find('.field4').val(ui.item.field4);
编辑：添加一些优化：
var $tr = $(this).closest('tr');
$tr.find('.field1').val(ui.item.field1);
$tr.find('.field2').val(ui.item.field2);
$tr.find('.field3').val(ui.item.field3);
$tr.find('.field4').val(ui.item.field4);
这篇关于如何将.delegate添加到此外部.autocomplete函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
