Question

我使用的jQuery组合框小部件工作正常，但在动态添加时会导致一些问题。

应该发生什么

访客使用组合框过滤/选择要添加到的有效用户列表
该列表没有可添加的最大用户数。
每个用户字段末尾都有一个[+]切换按钮，允许访问者将其他用户添加到列表中。
点击该按钮进行ajax调用，将更多用户添加到列表中，从而不会限制最大用户数。
最初，屏幕上会加载10个用户字段，然后当他们点击最后的[+]按钮时，ajax调用会在列表中再添加10个。

发生了什么

当提交包含用户列表的表单时，初始10个字段中的用户显示正常，但作为ajax调用的一部分添加的任何字段都将返回为空。

以下是代码：

组合框：

  (function( $ ) {
    $.widget( "ui.combobox", {
      _create: function() {
        var input,
          that = this,
          wasOpen = false,
          select = this.element.hide(),
          selected = select.children( ":selected" ),
          value = selected.val() ? selected.text() : "",
          wrapper = this.wrapper = $( "<span>" )
            .addClass( "ui-combobox" )
            .insertAfter( select );

        function removeIfInvalid( element ) {
          var value = $( element ).val(),
            matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
            valid = false;
          select.children( "option" ).each(function() {
            if ( $( this ).text().match( matcher ) ) {
              this.selected = valid = true;
              return false;
            }
          });

          if ( !valid ) {

          }
        }

        input = $( "<input>" )
          .appendTo( wrapper )
          .val( value )
          .addClass( "ui-state-default ui-combobox-input " )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: function( request, response ) {
              var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
              response( select.children( "option" ).map(function() {
                var text = $( this ).text();
                if ( this.value && ( !request.term || matcher.test(text) ) )
                  return {
                    label: text.replace(
                      new RegExp(
                        "(?![^&;]+;)(?!<[^<>]*)(" +
                        $.ui.autocomplete.escapeRegex(request.term) +
                        ")(?![^<>]*>)(?![^&;]+;)", "gi"
                      ), "<strong>$1</strong>" ),
                    value: text,
                    option: this
                  };
              }) );
            },
            select: function( event, ui ) {
              ui.item.option.selected = true;
              that._trigger( "selected", event, {
                item: ui.item.option
              });

            },
            change: function( event, ui ) {
              if ( !ui.item ) {
               removeIfInvalid( this );
              }
            }
          })
          .addClass( "ui-widget ui-widget-content ui-corner-left" );

        input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
          return $( "<li>" )
            .append( "<a>" + item.label + "</a>" )
            .appendTo( ul );
        };

        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          // .tooltip()
          .appendTo( wrapper )
          .removeClass( "ui-corner-all" )
          .addClass( "ui-corner-right ui-combobox-toggle" )
          .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", "" );
          });

       //  input.tooltip({
       // //  tooltipClass: "tool_toplft"
       //  });
      },

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

ajax代码：

$('body').on('click','.add_usr', function(){

    if($('.box.noshow').length == 3){
        $(this).fadeOut(800);
        var count = parseInt($(this).attr('data-ctr')) +1;
        $.post('/base/process.php', {action: 'team_add_usr_select', 'count': count}, function(data){
            $('.box:last').after(data.output);

        });

    }
        $('.box.noshow').first().fadeIn(800).removeClass('noshow');
        $('.box').children('select').removeAttr('disabled');
        $('.box.noshow').each(function(){
            $(this).children('select').attr('disabled', 'disabled');
        });
        $('.add_usr').css('display','none');
        $('.box:visible').last().children('.add_usr').css('display','inline-block');

        if($('.box:visible').length > 1){
            $('.del_usr').css('display', 'inline-block');
        }
    return false;

}）;

同样，组合框工作正常，但是当我提交表单时，字段存在但是空白。

更新

data为我输出一个包含详细信息的对象，包括原始表单信息。这是输出的一个示例：

form: Object
form: "team_add"
id_leader: "1"
id_team: ""
team_name: "test"
usr: Object
    1: "1"
    2: "13"
    3: "521"
    4: "533"
    5: "2"
    6: "3"
    7: "816"

此示例已添加12个用户。填写并单击条目＃7后，新字段将添加到表单中。另外，我注意到在这个例子中它停止显示其他字段。以前在测试时会列出8: ""。现在我更困惑了。

jquery组合框没有用ajax拉数据

0 个答案: