jquery - 当动态添加的 textarea 为空时禁用提交按钮 - jQuery

Question

如果任何 textarea 为空，我试图禁用提交按钮。如果该区域是静态的，它工作正常。但是，如果我通过单击按钮添加另一个文本区域，则仅当我在动态添加的文本区域内单击时它才会起作用。

我尝试过使用各种事件(输入单击键键键模糊键键)，但结果仍然相同。

这是我的代码

<div class='form'>
   <textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea>
   <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" id="insert"/>
   </div>
   <hr>
   <button class="btn btn-info add_field_button">Add Another textarea</button>
   <div class="input_fields_wrap form-group">
   </div>

$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click

        e.preventDefault();

        if (x < max_fields) { //max input box allowed
            x++; //text box increment

            $(wrapper).append('<textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea><button type="button" class="btn btn-danger remove_field">Delete</button></div>');


        }
    });

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
$(document).ready(function () {
    $(document).on('input click keyup keypress blur keyup', 'textarea', function () {

        var empty = false;
        $('textarea').each(function () {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
});

我应该以某种方式触发检查添加新文本区域的按钮上是否有任何文本区域为空的功能吗？

这是 中的演示jsfiddle

Answer 1

添加新时 textarea下 click事件只检查 textarea 是否为空，并取决于此禁用或启用的按钮。

演示代码 :

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click

    e.preventDefault();

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
    //added <div>
      $(wrapper).append('<div><textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea><button type="button" class="btn btn-danger remove_field">Delete</button></div>');


    }
    //chcking added textrea is empty
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        //disable
        $('.actions input').attr('disabled', 'disabled');
      } else {
        //enabled
        $('.actions input').attr('disabled', false);
      }
    });


  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
       //chcking added textrea is empty
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        //disable
        $('.actions input').attr('disabled', 'disabled');
      } else {
        //enabled
        $('.actions input').attr('disabled', false);
      }
    });
  })
});
$(document).ready(function() {
  $(document).on('input click keyup keypress blur keyup', 'textarea', function() {

    var empty = false;
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

    if (empty) {
      $('.actions input').attr('disabled', 'disabled');
    } else {
      $('.actions input').attr('disabled', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea>
  <div class='actions'>
    <input type="submit" value="Login" disabled="disabled" id="insert" />
  </div>
  <hr>
  <button class="btn btn-info add_field_button">Add Another textarea</button>
  <div class="input_fields_wrap form-group">
  </div>
</div>