Question

我有这段代码：

    <script  language="javascript">
  $(function() {
    $('#items,#button-search').hide();
    $("#companies").click(function() { 
      $(this).attr("value",""); 
      $('#address,#new-company-form').empty();
    });
    $( "#companies" ).autocomplete({
      source: ";companies",
      minLength: 2,
      select: function( event, ui ) {
        $('#address').show();
        if(ui.item.id == "create-new-company") {
          // call the new company form
          $('#address').empty();
          //$('#new-company-form').load('/companies/;new_resource?type=company #autoform',
          $('#new-company-form').load(';company_form #autoform');
        } // end 'if'
        else
        {
          $('#new-company-form').empty();
          $.ajax({
            type: 'GET',
            url: ';addresses?company=' + ui.item.id,
            dataType: 'json',
              // process the addresses
              success: function(json) {
                var opts = '';
                $.each(json, function(k, v) {
                  opts += '<option value="'+k+'">' + v + '</option>';
                });
                $('#address').html('<select>' + opts + '</select>');
                // we click on a select value .change(function () {
                $("#address").change(function () {
                  var id = $(":selected", this).val();
                  if(id == "create-new-address") {
                    $('#new-address-form').load(';address_form #autoform');
                  }
                  else
                  {
                    alert('Request completed' + id);
                  //  pass the id value to the application
                  }
                }) // end click event
              }
            }); //end ajax call to address

        } // end else
            } // end select address
        }); // end autocomplete
    }); // end function
</script>

每次我运行表单时，'alert（'Request completed'+ id）;'当我点击选项值时，第41行显示4次。

有没有办法改善这个？

由于

诺曼

Answer 1

您正在autoComplete选择功能中设置jQuery事件处理程序。因此，每次调用自动完成的select函数时，都会执行以下操作：

$("#address").change(function() {

这意味着这个事件处理程序一次又一次地被添加（因此它被多次调用）。您需要在自动完成框架之外添加该事件处理程序，而不是在自动完成功能或选择处理程序中添加。

我想你希望它是这样的：

<script language="javascript">
$(function() {
    $('#items,#button-search').hide();
    $("#companies").click(function() {
        $(this).attr("value", "");
        $('#address,#new-company-form').empty();
    });
    // we click on a select value .change(function () {
    $("#address").change(function() {
        var id = $(":selected", this).val();
        if (id == "create-new-address") {
            $('#new-address-form').load(';address_form #autoform');
        } else {
            alert('Request completed' + id);
            //  pass the id value to the application
        }
    }) // end click event
    $("#companies").autocomplete({
        source: ";companies",
        minLength: 2,
        select: function(event, ui) {
            $('#address').show();
            if (ui.item.id == "create-new-company") {
                // call the new company form
                $('#address').empty();
                //$('#new-company-form').load('/companies/;new_resource?type=company #autoform',
                $('#new-company-form').load(';company_form #autoform');
            } // end 'if'
            else {
                $('#new-company-form').empty();
                $.ajax({
                    type: 'GET',
                    url: ';addresses?company=' + ui.item.id,
                    dataType: 'json',
                    // process the addresses
                    success: function(json) {
                        var opts = '';
                        $.each(json, function(k, v) {
                            opts += '<option value="' + k + '">' + v + '</option>';
                        });
                        $('#address').html('<select>' + opts + '</select>');
                    }
                }); //end ajax call to address
            } // end else
        } // end select address
    }); // end autocomplete
}); // end function
</script>

警报在此代码中显示4次

1 个答案: