Jquery 'On' method not working on dynamically appended row on table

Question

I have a table with 3 rows added by myself in html. i have a button "Add New Row" which appends a new row with "Edit" button inside last "td". now when i try to click on this newly generated "Edit" button, my script is not getting called. i don't understand what is wrong with my code snippet. I read about jquery "On" method it supposed to be able to generate an event but i don't know why it is not generating event in my code.

$(document).ready(function() {

  $(".row").click(function() {


    var markup = "<tr ><td class='newRow' contenteditable='false'></td><td class='newRow' contenteditable='false'></td><td class='newRow' contenteditable='false'></td><td class='hideCol' contenteditable='false'><button id='myNewRow' class='btn btn-sm btn-mdb-color btn-rounded editbtn' >edit</button></td></tr>";


    $("table").append(markup);

  });
});

$(document).ready(function() {
  $('.editbtn').on('click', function() {
    console.log('sulabh')

    var currentTD = $(this).parents('tr').find('td');
    if ($(this).html() == 'Edit') {
      $.each(currentTD, function() {
        $(this).prop('contenteditable', true)
      });
    } else {
      $.each(currentTD, function() {
        $(this).prop('contenteditable', false)
      });
    }

    $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dt-more-row-col" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>

    <tr>
      <th class="th-sm">Name
      </th>
      <th class="th-sm">Position
      </th>
      <th class="th-sm">Office
      </th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable='false' class='newRow'>Tiger Nixon</td>
      <td contenteditable='false' class='newRow'>System Architect</td>
      <td contenteditable='false' class='newRow'>Edinburgh</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>
    <tr>
      <td contenteditable='false' class='newRow'>Garrett Winters</td>
      <td contenteditable='false' class='newRow'>Accountant</td>
      <td contenteditable='false' class='newRow'>Tokyo</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>
    <tr>
      <td contenteditable='false' class='newRow'>Ashton Cox</td>
      <td contenteditable='false' class='newRow'>Junior Technical Author</td>
      <td contenteditable='false' class='newRow'>San Francisco</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>
    <tr>
      <td contenteditable='false' class='newRow'>Cedric Kelly</td>
      <td contenteditable='false' class='newRow'>Senior Javascript Developer</td>
      <td contenteditable='false' class='newRow'>Edinburgh</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>


  </tbody>
  <tfoot>
    <tr>
      <th>Name
      </th>
      <th>Position
      </th>
      <th>Office
      </th>
    </tr>

  </tfoot>
</table>

First of i can't see any element with the class `row` so can't test the first click function, second I can't reproduce the problem your describe. — Carsten Løvbo Andersen, Mar 10 '19 at 16:53

score 0 · Accepted Answer · answered Mar 10 '19 at 16:55

0

actually which content is on dom that only work for .click

which content comes dynamic which click also you want to handle then use document on click

  $('.editbtn').on('click', function () { })

instead of above click event use below

$(document).on('.editbtn','click', function () { })

answered Mar 10 '19 at 16:55

Paras Raiyani

748
5
10

Thanks Sir ,this work – user10989738 Mar 13 '19 at 12:27

Jquery 'On' method not working on dynamically appended row on table

1 Answers1