Question

我正在使用jQuery append函数来克隆前端的输入字段，它工作正常，但问题是我对父元素进行了验证，它不适用于新添加的输入字段。这是我的jQuery代码。

while = until . (not .)

jQuery(function($) {
  $("#addChild").click(function() {
    $(".name-field:first").clone().find("input").val("").end()
      .removeAttr("id")
      .appendTo("#additionalselects")
      .append($('<a class="delete" href="#"><i class="fa fa-times"></i></a>'));
  });
  $("body").on('click', ".delete", function() {
    $(this).closest(".name-field").remove();
  });
});
//Validation
$(document).ready(function() {

  $('.name-field').on('input', function() {
    // added for bit of simplicity or you can directly get valuess
    var name = $('input[name="firstname"]').val();
    var date = $('input[name="date"]').val();
    if (name != "" && date != "") {
      // values seems filled remove class  
      $('#stepname').removeClass('disabled');
    } else {
      // user has emptied some input so add class again.
      $('#stepname').addClass('disabled');
    }
  });

});

任何人都可以帮助我，怎么能实现这个目标？

提前致谢。

Answer 1

当您动态添加.name-field时，事件未绑定到新行尝试更改您的父元素，

$('#additionalselects').on('input','.name-field input',function(){
//^^^ use other static element or document if not works
    var parent = $(this).closest('.name-field'); // get the parent of focused input
    var name = parent.find('input[name="firstname"]').val();
    var date = parent.find('input[name="date"]').val();
    $('#stepname').toggleClass('disabled',(!name || !date));
});

另外，您应该在HTML中进行以下更改

删除所有属于克隆的id
创建一系列要克隆的字段，如firstname[]

jQuery输入验证在使用jquery append函数的新创建的输入字段之后不起作用

1 个答案: