Javascript 动态元素的 foreach class 上的函数脚本

Question

所以我有这个 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 class ,

的 td

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

问题是，如图所示，我有一个 "Add More" 按钮，当我添加新行时，验证函数忽略了新行，有人知道如何解决这个问题吗？ , 感谢您的帮助

编辑 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 元素，如果有人知道怎么做，那将非常有帮助，再次感谢您的帮助

Answer 1

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

Answer 2

我尝试更改

中的代码

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

最终成功了

Javascript 动态元素的 foreach class 上的函数脚本

Javascript Function script on foreach class of the dynamic element

html

javascript

jquery

dynamic-content