Adding a new row which contains button into table using jQuery [duplicate]

Question

I'm adding a new row into the table which is called people_table using the following code:

  $("#add_new_row").click(function() {
    console.log("***");
    $('table#people_table').append('<tr><td>Dima</td><td>Petrov</td><td>30</td><td><button type="button" class="btn btn-success" id="change_4">Change</button></td></tr>');

  });
...
<button type="button" class="btn btn-primary" id="add_new_row">Add new row</button>
<table class="table table-hover" id="people_table">
   <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Age</th>
    <th>Modify</th>
   </tr>
   {% for person in people %}
   <tr>
     <td>{{ person[1] }}</td>
     <td>{{ person[2] }}</td>
     <td>{{ person[3] }}</td>
     <td><button type="button" class="btn btn-success" id="change_{{ person[0] }}">Change</button></td>
   </tr>
   {% endfor%}
</table>

But after adding the row the following function

  $("button[id^='change_']").click(function() {
    console.log("+++");
  });

does not work for the button in the new added row, but it works for other buttons. What's the problem?

It does not work because the code ran BEFORE you added the button to the page. You either need to bind the event directly or use event delegation. — epascarello
– epascarello, Commented Aug 10, 2016 at 13:08
You should use the .on() function instead of .click() as .click() doesn't work for dynamic elements. — Romy Mathews
– Romy Mathews, Commented Aug 10, 2016 at 13:08

Ivan Karaman · Accepted Answer · 2016-08-10 13:09:01Z

0

try this, use method on for dynamically added elements...

 $(document).on('click', 'button[id^="change_"]', function() {
        console.log("+++");
      });

answered Aug 10, 2016 at 13:09

Ivan Karaman

1,2341 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Patel · Accepted Answer · 2016-08-10 13:09:35Z

0

For newly added dom element .click() will not useful in that case you have to use .on('click' event listner.

$("button[id^='change_']").on('click',function() {
    console.log("+++");
});

answered Aug 10, 2016 at 13:09

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

Comments

user6573425 · Accepted Answer · 2016-08-10 13:11:22Z

0

Try this enter link description here

 $("#add_new_row").click(function() {
    console.log("***");
    $('table#people_table').append('<tr><td>Dima</td><td>Petrov</td><td>30</td><td><button type="button" class="btn btn-success" id="change_4">Change</button></td></tr>');
addNewRow();
  });

  function addNewRow()
  {
   $("button[id^='change_']").click(function() {
    alert('click')
  });
  }

answered Aug 10, 2016 at 13:11

user6573425

Collectives™ on Stack Overflow

Adding a new row which contains button into table using jQuery [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related