Multiple input fields with same class calling same function not working

Question

I'm trying to call the same ajax function from multiple input fields. I followed this link and when I tested that code its working for me. But when I apply the same code in my view it's not working.

Here is my html code:

<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>

The add button add new row to the div class field. So the new row is generated dynamically. I use the below code for this:

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

The line I'm appending is the row inside the field class with a remove button.

And the below is used to call the alert for each input field added dynamically.

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

And when the function is called, it is only called by the first input field. Rest of the input fields that is generated dynamically doesnt call the function. Can someone please help me solve this issue?

Here the code as a snipped

//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

You have to add the keyup-event to your new inputfields, too:

(...).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>

Answer 2

When you add a HTML element, and you want to create an event on it, you have to create a new event on the new element. Because your script is loading only once, the element you add will not take the event of the class.

example :

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

with your current script :

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

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

    });
});

Well when you click on the button, it will add a new span. But the new span will not have the onClick event. So to do so you have to recreate your event. Whenever you want to create a new HTML element and bind an event on it.

new script :

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

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

    });
});

Answer 3

You can use event delegation, what you need is this. Because you are adding textbox run-time when button is clicked, it is not getting event binded, you can learn more here.

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

Demo:

$(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>