javascript - jQuery 自动完成不适用于克隆

Question

目前致力于 jQuery 自动完成和克隆。在单击添加更多 按钮之前的开始，原始字段工作正常，但是当我单击克隆该行的添加更多 按钮时，自动完成功能不起作用.

这是我的 HTML 代码

<div class="cloned-row1">
    <input type="text" id="txt_schName_1" class="ipt_Field required_Field txt_schName "/>
    <input type="button" class="btn_more edubtnmore btn_right edu_add_button" />
</div>

这是我克隆的 jQuery 代码

 $(document).on("click", ".edu_add_button", function() {
         var $clone = $('.cloned-row1:eq(0)').clone(true, true);
         var num = $('.cloned-row1').length;
         $clone.find('[id]').each(function() {
           this.id += '_' + num;
           $(this).removeClass("errRed");              
           if ($(this).hasClass("required_Field")) {
             $(this).prevAll('label').find('span.required-star').removeClass('text-error-red');
             $(this).addClass("cloned_field");
             //$(this).addClass("errRed");
           } else {
             $(this).removeClass("errRed");
             $(this).removeClass("text-error-red");
           }
         });
         $clone.find('.btn_more').after("<input type='button' class='btn_less1 edu_btnle' id='buttonless'/>");
         $clone.attr('id', "cloned-row" + (++count));
         $clone.find(".school_Name").attr('disabled', true).val('');
         $clone.find(".txt_schName").val('').attr('id', 'txt_schName_' + count);
         $clone.find(".degree_Description").attr('disabled', true).val('');
         $clone.find(".ipt_Havg").val('');
         $clone.find(".trans_date").val('');
         $(this).parents('.educat_info').after($clone);
         autoComplete($('#txt_schName_' + count));

这是我的自动完成代码

 $(document).ready(function() {
   autoComplete($('#txt_schName_1'));
});

function autoComplete(t) {
  t.tableAutocomplete({
    highlightClass: "bold",
    source: function(request, response) {
      var regex = new RegExp(request.term, 'i');
      //var filteredArray = filteredArray.slice(0,10);
      $.ajax({
        url: "json/dummy.json",
        dataType: "json",
        data: {
          term: request.term
        },
        success: function(data) {
          response($.map(data, function(item) {
            // This code is only for testing. It should be done on the server!
            if (regex.test(item.id) || regex.test(item.label)) {
              return item
            }
          }));
        },

      });
    },
    columns: [{
        field: 'id',
        title: 'Search School Name'
    }, {
        field: 'label',
        title: 'School Name'
    }],
    delay: 500,
    select: function (event, ui) {
        if (ui.item != undefined) {
            $(this).val(ui.item.value);
            $('#school_Name').val(ui.item.label);
            console.log(ui.item.label);
            if (ui.item.label === "Other"){
                var schoolObj = $(".school_Name");
                   schoolObj.prop('disabled', false);
                   schoolObj.val('');
            }
        }
    }
});
}

普通文本字段 - 在小数点后加零

$(".ipt_Havg").focusout(function(event) {
         var nondecimalRegex = /^\d{1,6}$/,
           inputtxt = event.target.value,
           decimalRegex = /^\d{1,6}\.\d{3}$/;
         if (inputtxt.length > 0) {
           var resultVal;
           if (/^\d{1,6}$/.test(inputtxt)) {
             resultVal = inputtxt + ".000";
           } else if (/^\d{1,6}\.\d{1,3}$/.test(inputtxt)) {
             // count of zeros to add to the end of input val
             var c = 3 - inputtxt.split("\.")[1].length;
             resultVal = inputtxt + (c == 1 ? "0" : (c == 2 ? "00" : ""));
           } else {
             alert("The field can have a maximum of 6 digits before the decimal symbol, and 3 digits after the decimal symbol");
           }
           this.value = typeof resultVal == "undefined" ? "" : resultVal;
         }
       });

当我搜索 SO 时，我在该链接中找到了一个解决方案，他们要求将自动完成功能放入一个函数中，并在克隆后调用该函数，我也做了同样的事情，但我仍然没有得到，我猜自动完成功能是正确的 uuid 概念如果我错了。

这是 JSFiddle

使用我当前的代码，我可以进行克隆和首次自动完成功能

提前致谢有任何建议

Answer 1

这里有一些变化:

• 首先避免使用深度克隆，自动完成 il 会复制绑定(bind)到自动完成元素的事件，这将不起作用；所以使用 clone()
• 触发自动完成的类/id 错误(例如缺少选择器类型或错误名称)，我已尝试修复它们
• 在第一个点之后，第二个自动完成更新的选择更新第一行我已经更改了 select 函数以在克隆上工作

HTML:

  <div class="input-group">
    <input type="text" id="txt_schName" class="ipt_Field txt_schName" />
    <p class="form-control-feedback"><i class="fa fa-search custom-mar"></i></p>
  </div>

Js:

$(document).on("click", ".edu_add_button", function() {
  var $clone = $('.cloned-row1:eq(0)').clone();
  var num = $('.cloned-row1').length;
  $clone.find('[id]').each(function() {
    this.id += '_' + num;
    $(this).removeClass("errRed");
    if ($(this).hasClass("required_Field")) {
      $(this).prevAll('label').find('span.required-star').removeClass('text-error-red');
      $(this).addClass("cloned_field");
      //$(this).addClass("errRed");
    } else {
      $(this).removeClass("errRed");
      $(this).removeClass("text-error-red");
    }
  });
  $clone.find('.btn_more').after("<input type='button' value='Delete' class='btn_less1 edu_btnle' id='buttonless'/>");
  $clone.attr('id', "cloned-row" + (++count));
  $clone.find(".school_Name").attr('disabled', true).val('');
  $clone.find(".txt_schName").val('').attr('id', 'txt_schName_' + count);
  $clone.find(".degree_Description").attr('disabled', true).val('');
  $clone.find(".ipt_Havg").val('');
  $clone.find(".trans_date").val('');

  var dateobj = new Date();
  var datemonth;
  if (dateobj.getMonth() + 1 < 10) datemonth = "0";
  datemonth += dateobj.getMonth() + 1;
  var fulldate = datemonth + "-" + dateobj.getDate() + "-" + dateobj.getFullYear();
  $clone.find("input.deg_date")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker({
      dateFormat: "mm/dd/yy",
      changeMonth: true,
      yearRange: "-100:+0",
      changeYear: true,
      maxDate: new Date(),
      showButtonPanel: false,
    });

  $('.cloned_field').addClass("errRed");
  var dateobj = new Date();
  var datemonth;
  if (dateobj.getMonth() + 1 < 10) datemonth = "0";
  datemonth += dateobj.getMonth() + 1;
  var fulldate = datemonth + "-" + dateobj.getDate() + "-" + dateobj.getFullYear();
  $clone.find("input.trans_date")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker({
      dateFormat: "mm/dd/yy",
      changeMonth: true,
      yearRange: "-100:+0",
      changeYear: true,
      maxDate: new Date(),
      showButtonPanel: false,
    });

  $(this).parents('.educat_info').after($clone);

  autoComplete($clone.find(".txt_schName"));
});

自动完成:

select: function(event, ui) {
  if (ui.item != undefined) {
    $(this).val(ui.item.value);
    $(this).closest('.row').find('.school_Name').val(ui.item.label);
    console.log(ui.item.label);
    if (ui.item.label === "Other") {
      var schoolObj = $(".school_Name");
      schoolObj.prop('disabled', false);
      schoolObj.val('');
    }
  }
}

演示:http://jsfiddle.net/v835qe9o/