CODEWITHSUNDEEP
jquery
manish5310277
manish5310277

Reputation: 53

After .append a row why .on is not working?

It work for first row as shown below code but after appending a row some how it is not working. I think it is not aware that a new row is created. I just stuck here here is the code

<table id="Allitems" class="table table-bordered table-hover Ptable">
            <tbody class = "input_fields_wrap_addRow">
                <tr class ="inputdata3">
                    <td class ="inputdata">
                    </td>
                    <td class ="inputdata">
                        <input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity">
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="inv_" class="inv_spacer" >
            <button class="add_field_button">Add More Fields</button>
        </div>

And

$(document).ready(function() {
                var wrapper         = $(".input_fields_wrap_addRow"); //Fields wrapper
                var add_button      = $(".add_field_button"); //Add button ID
                $(add_button).click(function(e){ //on add input button click
                    e.preventDefault();
                        $(wrapper).append('<tr class ="inputdata3"><td class ="inputdata"></td><td class ="inputdata"><input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"></td></tr>'); //add input box

                });
            });


            $(function(){
                $('.inputdata3').on('keyup','.Invquantity',function(){
                    var tr = $(this).parent().parent();
                    alert("eded");
                });
            });

Upvotes: 2

Views: 565

Answers (5)

Boško Rabrenović
Boško Rabrenović

Reputation: 38

Instead of selecting $('.inputdata3'), select the .input_fields_wrap_addRow like this $('.input_fields_wrap_addRow').

Upvotes: 1

Satpal
Satpal

Reputation: 133433

Event needs to be delegated to static element that is to be present at the time the delegated event handler is attached. As inputdata3 dynamically generate thus event handler didn't worked.

Instead of $('.inputdata3') use wrapper cached variable or input_fields_wrap_addRow selector

$(".input_fields_wrap_addRow").on('keyup','.Invquantity',function(){})

Upvotes: 2

Zeeshan
Zeeshan

Reputation: 619

Because you are attaching event listeners to your first tr which is rendered initially and event listener is attached to this tr. Newly added row does not have this even listener attached. You need to took advantage of event bubbling. So instead attach your event listner to your tbody as follow:

$('.input_fields_wrap_addRow').on('keyup','.Invquantity',function(){
     var tr = $(this).parent().parent();
     alert("eded");
 });

Here is a working snippet. You can run this snippet as is by clicking on Run Code Snippet button

$(document).ready(function() {
  var wrapper = $(".input_fields_wrap_addRow"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    $(wrapper).append('<tr class ="inputdata3"><td class ="inputdata"></td><td class ="inputdata"><input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"></td></tr>'); //add input box

  });
  
  $('.input_fields_wrap_addRow').on('keyup', '.Invquantity', function() {
  var tr = $(this).parent().parent();
  alert("eded");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Allitems" class="table table-bordered table-hover Ptable">
            <tbody class = "input_fields_wrap_addRow">
                <tr class ="inputdata3">
                    <td class ="inputdata">
                    </td>
                    <td class ="inputdata">
                        <input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity">
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="inv_" class="inv_spacer" >
            <button class="add_field_button">Add More Fields</button>
        </div>

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

Its not working because you are checking for .inputdata3. JS code will get the first .inputdata3 and will only work for first.

You need to change this line:

$('.inputdata3').on('keyup','.Invquantity',function(){

to:

$('table#Allitems').on('keyup', '.Invquantity', function() {

$(document).ready(function() {
  var wrapper = $(".input_fields_wrap_addRow"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    $(wrapper).append('<tr class ="inputdata3"><td class ="inputdata"></td><td class ="inputdata"><input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity"></td></tr>'); //add input box

  });
});


$('table#Allitems').on('keyup', '.Invquantity', function() {
  var tr = $(this).parent().parent();
  alert("eded");
});

$(function() {

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Allitems" class="table table-bordered table-hover Ptable">
  <tbody class="input_fields_wrap_addRow">
    <tr class="inputdata3">
      <td class="inputdata">
      </td>
      <td class="inputdata">
        <input type="number" name="data[Invoice][itemQuantity][]" step="1" min="0" class="form-control Invquantity">
      </td>
    </tr>
  </tbody>
</table>
<div id="inv_" class="inv_spacer">
  <button class="add_field_button">Add More Fields</button>
</div>

Upvotes: 1

N. Ivanov
N. Ivanov

Reputation: 1823

Since it is a dynamically loaded element it wont get picked up, instead use:

$("body").on("keyup", ".Invquantity", function(){
    //code here
});

Hope this helps!

Upvotes: 0

Related Questions