动态元素的foreach类上的Javascript函数脚本答案

【问题标题】：Javascript Function script on foreach class of the dynamic element动态元素的foreach类上的Javascript函数脚本
【发布时间】：2018-01-18 19:17:55
【问题描述】：

所以我有这个javascript函数

function validation(step){
    var lines = [];
    $.each($('#part1row').find('.countall').html().split(/<br\s*\/?>/), function(i, line){
      var lineremnbsp = line.replace(/&nbsp;/gi,'');
      var lineremspace = lineremnbsp.replace(/ /gi,'');
      if(lineremspace != ''){
          lines.push(parseInt(lineremspace));
      }
    });
    var sum = lines.reduce(getSum, 0);
    console.log(sum);
    if (sum !== 100){
      var countall = false;
    }
    if (countall == false){
      $.toast({
          heading: 'Alert',
          text: 'Jumlah Field Weight harus 100%',
          position: 'top-right',
          loaderBg: '#FFC107',
          icon: 'warning',
          hideAfter: 3500
      });
      return false;
    }

    if (countall == true){
      return true;
    }
  }
}

验证函数是针对这个特定的 td，它是带有 .countall 类的 td，

this is the table , the red box is the td with countall class

问题是，正如您在图像中看到的，我有一个“添加更多”按钮，当我添加新行时，验证函数会忽略新行内的 countall 类，任何人都知道如何解决这个问题？，谢谢你的帮助

编辑 2 --------------------------

这是添加更多功能

function addMore(){
  var step = '<?=$pmpdocument->completion?>';
  if (step == 'step1') {
    var content = '<tr>'+
          '<td class="editable" data-step="step1">Double Click to Edit...</td>'+
          '<td class="editable advance" data-step="step1">Double Click to Edit...</td>'+
          '<td class="editable numberonly countall" data-step="step1">Double Click to Edit...</td>'+
          '<td class="marked numberonly" data-step="step3"> </td>'+
          '<td class="marked numberonly" data-step="step4"> </td>'+
          '<td class="marked" data-step="step4"> </td>'+
          '<td data-step="step5" class="numberonly"> </td>'+
          '<td data-step="step5" class="numberonly"> </td>'+
          '<td data-step="step5"> </td>'+
          '<td data-step="step5"> </td>'+
        '</tr>';
      $("#part1row").append(content);
      var newnumber = parseInt($("#part1row").attr('data-row')) + 1;
      $("#part1row").attr('data-row', newnumber);
      var datarow = parseInt($("#part1row").attr('data-row'));
      if (datarow > 1) {
        $("#removerow").show();
      } else {
        $("#removerow").hide();
      }
  }
}

我在google上找过，很多人只说动态元素的点击功能，比如动态元素应该使用

$(document).on('click', '#idname', function(){});

代替

$(#idname).on('click', function(){});

它适用于动态元素，我也将它用于项目，但我仍然不知道如何重新调用验证函数来重新检测新的 DOM 元素，如果有人知道如何做吧，这会很有帮助，再次感谢您的帮助

【问题讨论】：

您应该添加函数以在您的问题中添加新行，如果验证仅对新行失败，则行生成一定有问题
我相信他的问题是验证忽略了新行，而不是其他方式
考虑使用类而不是 ID 进行迭代。另外，考虑添加一个无限的页面嗅探器，它会扫描页面以查找新行，并在找到新行时将事件绑定到新行。
我只是编辑它并在帖子中添加“添加更多”功能，你们可以看到它

标签： javascript jquery html dynamic-content

【解决方案1】：

我尝试从

更改代码

$.each($('.countall[data-step="1"]').html().split(/<br\s*\/?>/), function(i, line){
      var lineremnbsp = line.replace(/&nbsp;/gi,'');
      var lineremspace = lineremnbsp.replace(/ /gi,'');
      if(lineremspace != ''){
          lines.push(parseInt(lineremspace));
      }
    });

到

$('.countall[data-step="step1"]').each(function(key, val){
      var liness = $(this).html().split(/<br\s*\/?>/);
      $.each(liness, function(i, line){
        var lineremnbsp = line.replace(/&nbsp;/gi,'');
        var lineremspace = lineremnbsp.replace(/ /gi,'');
        if(lineremspace != ''){
            lines.push(parseInt(lineremspace));
        }
      })
    });

最终成功了

【讨论】：

【解决方案2】：

当您添加到 DOM 时，验证事件处理程序不会应用于新元素。事件处理程序仅在应用事件处理程序时影响 DOM 上的元素。因此，当您添加新行时，您需要重新调用验证事件处理程序。

【讨论】：