当我向表中添加新行时，JQuery Combobox会重复

Question

我正在尝试使用将在表的每一行上的JQuery Combobox。用户可以选择添加另一行，JQuery Combobox将通过Javascript激活。

我遇到的麻烦是，如果我每次单击添加新行时循环并激活所有组合框，除了现有的行和现有的行之外，还会添加一个新的组合框。将失去其所有功能（即所有下拉值）。但如果我只激活新行上的组合框，现有行上的旧组合框将失去其功能。

这是组合框的JQuery代码：

//1.10 JQuery
(function( $ ) {
$.widget( "custom.combobox", {
    _create: function() {
        this.wrapper = $( "<span>" )
            .addClass( "custom-combobox" )
            .insertAfter( this.element );
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
    },

     _createAutocomplete: function() {
         var selected = this.element.children( ":selected" ),
            value = selected.val() ? selected.text() : "";

        this.input = $( "<input>" )
         .appendTo( this.wrapper )
         .val( value )
         .attr("tabIndex", 10)
         .attr( "title", "" )
         //.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
         .autocomplete({
             delay: 0,
             minLength: 0,
             source: $.proxy( this, "_source" )
         })
         .tooltip({
            // tooltipClass: "ui-state-highlight"
         });

         this._on( this.input, {
             autocompleteselect: function( event, ui ) {
                 ui.item.option.selected = true;
                 this._trigger( "select", event, {
                     item: ui.item.option
                 });
             },
             autocompletechange: "_removeIfInvalid"
            });
         },

         _createShowAllButton: function() {
             var input = this.input,
                wasOpen = false;

        $( "<a>" )
            .attr( "tabIndex", -1 )
            .attr( "title", "Show All Items" )
            .tooltip()
            .appendTo( this.wrapper )
            .button({
                icons: {
                primary: "ui-icon-triangle-1-s"
             },
             text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "custom-combobox-toggle ui-corner-right" )
            .mousedown(function() {
                wasOpen = input.autocomplete( "widget" ).is( ":visible" );
             })
            .click(function() {
                input.focus();

                // Close if already visible
             if ( wasOpen ) {
                 return;
             }

             // Pass empty string as value to search for, displaying all results
                input.autocomplete( "search", "" );
             });
        },

         _source: function( request, response ) {
             var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
             response( this.element.children( "option" ).map(function() {
                 var text = $( this ).text();
                 if ( this.value && ( !request.term || matcher.test(text) ) )
                        return {
                            label: text,
                             value: text,
                             option: this
                            };
                    }) );
             },

             _removeIfInvalid: function( event, ui ) {

                 // Selected an item, nothing to do
                 if ( ui.item ) {
                     return;
                 }

                 // Search for a match (case-insensitive)
                 var value = this.input.val(),
                    valueLowerCase = value.toLowerCase(),
                    valid = false;
                 this.element.children( "option" ).each(function() {
                     if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                         this.selected = valid = true;
                         return false;
                     }
                 });

                  // Found a match, nothing to do
                 if ( valid ) {
                     return;
                 }
                 // Remove invalid value
                 this.input
                 .val( "" )
                 .attr( "title", value + " didn't match any item" )
                 .tooltip( "open" );
                 this.element.val( "" );
                 this._delay(function() {
                     this.input.tooltip( "close" ).attr( "title", "" );
                 }, 2500 );
                 this.input.data( "ui-autocomplete" ).term = "";
             },

             _destroy: function() {
                 this.wrapper.remove();
                 this.element.show();
             }
    });
})( jQuery );

这是我的代码，用于在页面加载时初始化页面每一行的现有组合框：

<script>
<c:set var="count" value="0"/>
<c:forEach var="list" items="${itemlist}">
$("#combobox_" + ${count}).combobox({
     select: function (event, ui) {
     updateAnotherColumn(this.value, ${count});
     }   
 });
<c:set var="count" value="${count +1}"/>
</c:forEach>
</script>

这是我添加新行以循环遍历所有行并初始化组合框时调用的函数：

function initializeCombobox(){  
    <c:forEach varStatus="i" begin="0" end="${counter + 1}">
    $("#combobox_" + ${i.index}).combobox({
         select: function (event, ui) {
            updateAnotherColumn(this.value, ${i.index});
         }   
     });
    </c:forEach>
    } 

欢迎任何指示！