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; 
     } 
     }); 

当我搜索通过所以我发现一个解决方案，在该链接，他们要求把自动完成功能，并调用克隆后的功能我做了同样的但仍然我不geting我猜autocomplete是采取uuid概念正确如果我错了。

这里是JSFiddle

随着我当前的代码在那里我能做到的克隆和第一次自动完成功能

预先感谢任何建议，请

Answer 1

以下一些变化：

• 首先避免使用深度克隆，自动完成il将复制绑定到自动完成元素的事件，它不会工作;所以使用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/