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类的td，

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

问题是，正如你在图像中看到的那样，我得到了一个“Add More”按钮，当我添加一个新行时，验证函数会忽略新行中的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();
      }
  }
}

我一直在谷歌上寻找它，很多人只谈论动态元素上的点击功能，就像你应该使用的动态元素一样

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

而不是

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

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

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

并最终起作用

Answer 2

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

Javascript函数脚本在动态元素

2 个答案: