jQuery自动完成功能不适用于克隆

先生

目前正在使用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

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

预先感谢任何建议

欧文·多米宁(Irvin Dominin)

这里有一些变化:

  • 首先,请避免使用深度克隆,因为autocomplete il将复制绑定到autocomplete元素的事件,因此它将不起作用;所以用clone()
  • 您触发autoComplete的类/ 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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

自动完成功能不适用于克隆的输入元素

来自分类Dev

jQuery自动完成功能不适用于键值对数组

来自分类Dev

自动完成功能不适用于jQuery v1.8.3(版本)

来自分类Dev

jQuery自动完成功能不适用于ASP.NET MVC 5

来自分类Dev

jQuery自动完成功能不适用于js对象

来自分类Dev

Jquery UI 自动完成功能不适用于搜索带有 id 的名称

来自分类Dev

JQuery 自动完成功能不适用于 minLength 0 和自定义样式

来自分类Dev

为什么PyCharm的自动完成功能不适用于我安装的库?

来自分类Dev

vscode自动完成功能不适用于打字稿中的方法

来自分类Dev

DOXYGEN,Eclox:函数自动完成功能不适用于装饰宏

来自分类Dev

Materialize.css自动完成功能不适用于Polymer

来自分类Dev

Bash选项卡自动完成功能不适用于apt

来自分类Dev

物料自动完成功能不适用于InputProps

来自分类Dev

React Material UI自动完成功能不适用于Formik

来自分类Dev

Bash选项卡自动完成功能不适用于apt

来自分类Dev

Tab自动完成功能不适用于apt-get install(kubuntu)

来自分类Dev

自动完成功能不适用于新的SWIFT文件/类

来自分类Dev

自动完成功能不适用于Solr中的多个字段

来自分类Dev

自动完成功能不适用于枚举-Swift 3

来自分类Dev

YouTube搜索自动完成功能不适用于Framework 7

来自分类Dev

Emmet自动完成功能不适用于Sublime中的php文件(展开缩写)

来自分类Dev

使用非拉丁字符时,自动完成功能不适用于某些移动浏览器

来自分类Dev

显示/隐藏功能不适用于克隆功能

来自分类Dev

Eclipse 4.6代码完成功能不适用于Java 9

来自分类Dev

Javascript 单击功能不适用于自动打开

来自分类Dev

追加功能不适用于更改功能jQuery

来自分类Dev

jQuery单击功能不适用于动态元素

来自分类Dev

jQuery功能不适用于点击事件

来自分类Dev

显示功能不适用于 Materialize 和 jQuery

Related 相关文章

  1. 1

    自动完成功能不适用于克隆的输入元素

  2. 2

    jQuery自动完成功能不适用于键值对数组

  3. 3

    自动完成功能不适用于jQuery v1.8.3(版本)

  4. 4

    jQuery自动完成功能不适用于ASP.NET MVC 5

  5. 5

    jQuery自动完成功能不适用于js对象

  6. 6

    Jquery UI 自动完成功能不适用于搜索带有 id 的名称

  7. 7

    JQuery 自动完成功能不适用于 minLength 0 和自定义样式

  8. 8

    为什么PyCharm的自动完成功能不适用于我安装的库?

  9. 9

    vscode自动完成功能不适用于打字稿中的方法

  10. 10

    DOXYGEN,Eclox:函数自动完成功能不适用于装饰宏

  11. 11

    Materialize.css自动完成功能不适用于Polymer

  12. 12

    Bash选项卡自动完成功能不适用于apt

  13. 13

    物料自动完成功能不适用于InputProps

  14. 14

    React Material UI自动完成功能不适用于Formik

  15. 15

    Bash选项卡自动完成功能不适用于apt

  16. 16

    Tab自动完成功能不适用于apt-get install(kubuntu)

  17. 17

    自动完成功能不适用于新的SWIFT文件/类

  18. 18

    自动完成功能不适用于Solr中的多个字段

  19. 19

    自动完成功能不适用于枚举-Swift 3

  20. 20

    YouTube搜索自动完成功能不适用于Framework 7

  21. 21

    Emmet自动完成功能不适用于Sublime中的php文件(展开缩写)

  22. 22

    使用非拉丁字符时,自动完成功能不适用于某些移动浏览器

  23. 23

    显示/隐藏功能不适用于克隆功能

  24. 24

    Eclipse 4.6代码完成功能不适用于Java 9

  25. 25

    Javascript 单击功能不适用于自动打开

  26. 26

    追加功能不适用于更改功能jQuery

  27. 27

    jQuery单击功能不适用于动态元素

  28. 28

    jQuery功能不适用于点击事件

  29. 29

    显示功能不适用于 Materialize 和 jQuery

热门标签

归档