具有相同类的多个输入字段调用相同的功能不起作用

时间：2018-11-05 09:13:49

标签： javascript jquery html laravel-5

我正在尝试从多个输入字段调用相同的ajax函数。我跟着 this链接，并在我测试该代码时对我有效。但是，当我在视图中应用相同的代码时，它将无法正常工作。

这是我的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>

4 个答案:

答案 0 :(得分：3)

您可以使用事件委托，这是您需要的。因为单击按钮时要添加文本框运行时，所以它没有绑定事件，因此可以了解更多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>

答案 1 :(得分：0)

您还必须将keyup-event添加到新的输入字段中：

(...).find("input").keyup(function() {
  alert($(this).val());
});


$(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++;
      var newInput = $('<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>').find("input").keyup(function() {
        alert($(this).val());
      });
      $(wrapper).append(newInput);
    } 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());
  });
});
<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>

答案 2 :(得分：0)

添加HTML元素并要在其上创建事件时，必须在新元素上创建一个新事件。由于您的脚本仅加载一次，因此添加的元素不会发生该类的事件。

示例：

  <body>
   <button id ="add_span"> ADD SPAN</button>
  <div>
    <span class="click">Click</span>
  </div>
  </body>

使用您当前的脚本：

   $(document).ready(function () {
    $("#add_span").click(function () {
        $('div').append("  <span class='click'>Click</span>");
    });

    $('.click').click(function () {
        alert("click");

    });
});

当您单击按钮时，它将添加一个新的跨度。但是新跨度将没有onClick事件。因此，您必须重新创建事件。每当您要创建新的HTML元素并在其上绑定事件时。

新脚本：

    $(document).ready(function () {
    $("#add_span").click(function () {
        $('div').append("  <span class='click'>Click</span>");
        $('.click').click(function () {
            alert("click");

        });
    })
    $('.click').click(function () {
        alert("click");

    });
});

答案 3 :(得分：-1)

您必须使用.on()为动态生成的DOM元素附加事件处理程序。对于您的情况，您应该执行以下操作：

 $(add_button).on('click', function(e){...});
相关问题
最新问题