javascript - 具有相同类的多个输入字段调用相同的函数不起作用

Question

我正在尝试从多个输入字段调用同一个 ajax 函数。我跟着 this链接，当我测试该代码时，它对我有用。但是，当我在我的 View 中应用相同的代码时，它不起作用。

这是我的html代码:

<div class="col-md-12 field">
 <div class="row">
  <div class="col-md-3">
      <label for="brands[]" class="control-label" style="width:100%">BR-NO</label>
      <input class="mytextbox" type="text" style="width:100%;" name="brands[]" required>
      <div id="brList" style="width:auto;"></div>
  </div>
  <div class="col-md-4" style="margin-top:2%;" > 
      <button class="btn btn-round btn-primary add_form_field" type="button" id="add_form_field"><i class="now-ui-icons ui-1_simple-add"></i></button> 
  </div> 
 </div>
</div>

添加按钮将新行添加到 div 类字段。所以新行是动态生成的。我为此使用以下代码:

//For Brands Add 
    $(document).ready(function() {
        var max_fields      = 5;
        var wrapper         = $(".field");
        var add_button      = $(".add_form_field");

        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div class="row"><div class="col-md-3"><label for="brands[]" class="control-label" style="width:100%">BR-NO</label><input class="mytextbox" type="text" style="width:100%;" name="brands[]" required> <div id="brList" style="width:auto;"></div></div><div class="col-md-4"><a href="#" class="delete btn btn-round btn-primary"><i class="now-ui-icons ui-1_simple-remove"></i></a></div></div>');
            }
            else
            {
                swal({
                    title: "Warning",
                    text: "Cannot add more than 5 brands",   
                    icon: "warning",
                })
            }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault(); $(this).parent().parent('div').remove(); x--;
        })
    });

我要附加的行是字段类中带有删除按钮的行。

下面用于调用动态添加的每个输入字段的警报。

$(document).ready(function(){
        $('.mytextbox').keyup(function(){
            alert( $(this).val());
        });
    });

并且调用该函数时，仅由第一个输入字段调用。动态生成的其余输入字段不会调用该函数。有人可以帮我解决这个问题吗？

这里是代码片段

//For Brands Add 
    $(document).ready(function() {
        var max_fields      = 5;
        var wrapper         = $(".field");
        var add_button      = $(".add_form_field");

        var x = 1;
        //generate input fields dynamicially
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div class="row"><div class="col-md-3"><label for="brands[]" class="control-label" style="width:100%">BR-NO</label><input class="mytextbox" type="text" style="width:100%;" name="brands[]" required> <div id="brList" style="width:auto;"></div></div><div class="col-md-4"><a href="#" class="delete btn btn-round btn-primary"><i class="now-ui-icons ui-1_simple-remove"></i></a></div></div>');
            }
            else
            {
                swal({
                    title: "Warning",
                    text: "Cannot add more than 5 brands",   
                    icon: "warning",
                })
            }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault(); $(this).parent().parent('div').remove(); x--;
        });
        
        //this only works on first input
        $('.mytextbox').keyup(function(){
            alert( $(this).val());
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field">
 <div class="row">
  <div class="col-md-3">
      <label for="brands[]" class="control-label" style="width:100%">BR-NO</label>
      <input class="mytextbox" type="text" style="width:100%;" name="brands[]" required>
      <div id="brList" style="width:auto;"></div>
  </div>
  <div class="col-md-4" style="margin-top:2%;" > 
      <button class="btn btn-round btn-primary add_form_field" type="button" id="add_form_field"><i class="now-ui-icons ui-1_simple-add"></i></button>  
  </div> 
 </div>
</div>

Answer 1

可以使用事件委托(delegate)，你需要的就是这个。因为您是在单击按钮时添加文本框运行时，所以它没有绑定(bind)事件，您可以了解更多信息 here .

$(document).on("keyup",".mytextbox",function(){

演示:

$(document).ready(function() {
  var max_fields = 5;
  var wrapper = $(".field");
  var add_button = $(".add_form_field");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div class="row"><div class="col-md-3"><label for="brands[]" class="control-label" style="width:100%">BR-NO</label><input class="mytextbox" type="text" style="width:100%;" name="brands[]" required> <div id="brList" style="width:auto;"></div></div><div class="col-md-4"><a href="#" class="delete btn btn-round btn-primary"><i class="now-ui-icons ui-1_simple-remove"></i></a></div></div>');
    } else {
      swal({
        title: "Warning",
        text: "Cannot add more than 5 brands",
        icon: "warning",
      })
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent().parent('div').remove();
    x--;
  })
});

$(document).ready(function() {
  $(document).on("keyup", ".mytextbox", function() {
    alert($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field">
  <div class="row">
    <div class="col-md-3">
      <label for="brands[]" class="control-label" style="width:100%">BR-NO</label>
      <input class="mytextbox" type="text" style="width:100%;" name="brands[]" required>
      <div id="brList" style="width:auto;"></div>
    </div>
    <div class="col-md-4" style="margin-top:2%;">
      <button class="btn btn-round btn-primary add_form_field" type="button" id="add_form_field"><i class="now-ui-icons ui-1_simple-add"></i></button>
    </div>
  </div>
</div>