如何将.delegate添加到此外部.autocomplete函数？

时间：2011-10-31 20:54:34

标签： jquery

我今天刚学会了.delegate，我知道我可以用于我想要的东西，但我不知道如何在这里添加它。

添加的每一行都需要我能够使用.autocomplete它们都使用相同的数据。

<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但它不对。我再次填充所有字段。

<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>

工作示例！

<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>

2 个答案:

答案 0 :(得分：1)

假设字段有一个＆＃34;字段＆＃34;类，这样的东西应该有效。

$("body").delegate(".field:not(:ui-autocomplete)","focus",function(){
  $(this).autocomplete(options);
});

编辑：我没有意识到代码还有更多，所以我没有看到下面的HTML。感谢roselan指出这一点。重复ID问题肯定会成为一个问题，但我发布的委托代码应该是一个很好的起点，可以找出如何动态地将插件应用于添加了ajax的元素。之后，您只需克服重复的ID问题。

编辑以回应评论：

这一行和类似的行

$('.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);

答案 1 :(得分：-1)

我确实修改了一下你的代码。这应该工作（当然没有测试它^^）

<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>
</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">
<div id="orderForm">
<table id="orderTable" width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <th>FIELD 1</th>
        <th>FIELD 2</th>
        <th>FIELD 3</th>
        <th>FIELD 4</th>
        <th>QTY</th>
    </tr>
    <tr class="orderLine">
        <td><input name="field1" type="text" class="field field1" size="15" tabindex="1"></td>
        <td><input name="field2" type="text" class="field field2" size="15"></td>
        <td><input name="field3" type="text" class="field field3" size="15"></td>
        <td><input name="field4" type="text" class="field 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>
</div>
</table>
</form>
<!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE -->

<script type="text/javascript">
$(function() {
    $('.field').val("");

    /* with this method no need to put the first line in the table, I would use this is the table comme "empty"
    var $newLine = $('
        <tr class="orderLine">
            <td><input name="field1" type="text" class="field field1" size="15" tabindex="1"></td>
            <td><input name="field2" type="text" class="field field2" size="15"></td>
            <td><input name="field3" type="text" class="field field3" size="15"></td>
            <td><input name="field4" type="text" class="field 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>
    ');
    $newLine.appendTo('orderTable'); 
    */

    // this method good with first 'td' line in table
    var $newLine = $('#orderTable').children('tr').eq(1).clone();

    // if I remember correctly, autocomplete appends to the body. 
    // hence, no need to reasign it to the "newlines"
    $(".field").autocomplete({
        source: "PRODUCT.ORDER.QUERY.php",
        minLength: 2,
        autoFocus: true,
        select: function(event, ui) {
            /*
            $('.field1', this).val(ui.item.field1);
            $('.field2', this).val(ui.item.field2);
            $('.field3', this).val(ui.item.field3);
            $('.field4', this).val(ui.item.field4);
            */

            for ( var field in ui.item ) {
                $('.'+field, this).val(ui.item[field]); //maybe you have to replace "this" by "event.target"
            }
        }
    });


    $("#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
    $("#orderForm").delegate('#addLine', 'click', function () {
        $('#orderForm').append($newLine);
    });
});

</script>
</body>
</html>
相关问题
最新问题