Jquery add click event after append new row in table WITHOUT function

Question

That's my problem, I append a new row in my table. In this row is a button, that should be clickable and fire an event. I found tons of solutions, but each of them contains this way:

.on('click', 'button', function(){    
//do something    
});

In need a solution without that function-call on this place (only activate the click possibility). The reasen is, I have three different ajax parts for add, edit and delete a table row. I control this by a contentEditable table. So each row gets a button to edit and delete this row. If I insert a new line, the new row will get these buttons. To make my button run like the example above, I get a structure like this :

// AJAX for edit row
do something

// AJAX for delete row
do something

// AJAX for add row
$('#editTable > tbody:last').append('<tr><td><button>DELETE</button></tr><td>');

$('#table').on('click', 'button', function() {
    // AJAX for delete row
    do something
});

By this way, I see the problem,I have to write the complete AJAX-delete part twice.

Theoretical it sounds soooo easy, activate the click event for the delete button and after click it, the AJAX delete part will be called.

But in pratice I found a easy solution like this.

Hope you guys have one for me...

Thanks a lot!!!

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — ventaquil, Apr 27 '16 at 21:42
I know this way, but im looking for a solution that beware me to write the code twice. — grizzly, Apr 27 '16 at 21:51

Zakaria Acharki · Answer 1 · 2016-04-27T22:09:56.563

2

Give your added buttons a global class e.g delete and use event delegation on() to add one event for all the buttons, check example bellow.

JS :

$('#editTable > tbody:last').append('<tr><td><button class="delete">DELETE</button></tr><td>');

$('body').on('click', '.delete', function (event) {
    //Your code here
});

Hope this helps.

$('body').on('click', '#add', function (event) {
  $('#editTable').append('<tr><td>test<td><td><button class="delete">DELETE</button></tr><td>');
});

$('body').on('click', '.delete', function (event) {
    alert("AJAX for delete row");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>
<table id="editTable">
    <thead>
      <th>TEST</th>  
      <th>Action</th>  
    </thead>
</table>

edited Apr 27 '16 at 22:09

answered Apr 27 '16 at 21:51

Zakaria Acharki

63,488
15
64
88

Thanks... The problem is not to find / call the right button. I find it but it wont fire, because the only solution I found so far to make him fire the event is the .on (function {}) way, but this way includes write an indentical code twice – grizzly Apr 27 '16 at 21:55
Why you have to _write an indentical code twice_ ?? you have just to create event one time then it will be attached to every button added and has `delete` class. – Zakaria Acharki Apr 27 '16 at 21:56
That sounds me like the right way... So far, I call the delete event by this way: $('button[name="deleteButton"]').click(function() { ... }); How can I write it seperated and call it on these buttons? – grizzly Apr 27 '16 at 21:58
I can't really undestood what you want, i'll try to add a snippet to my post i believe that this is a basic case... why you have to call `//AJAX for delete row` in the start? why not just put it inside event? – Zakaria Acharki Apr 27 '16 at 22:02
Puh diffucult to explain... what do you mean with "in the start"? – grizzly Apr 27 '16 at 22:06

score 1 · Answer 2 · answered Apr 27 '16 at 21:40

1

If you want add click event for dynamically added content you should use this code:

$(document).on('click', 'yourcontent', function (event) {
    // ...
});

For simple td element with class:

$(document).on('click', 'td.myclass', function (event) {
    // ...
});

answered Apr 27 '16 at 21:40

ventaquil

2,541
3
19
43

I know this way, but im looking for a solution that beware me to write the code twice. – grizzly Apr 27 '16 at 21:50

Jquery add click event after append new row in table WITHOUT function

2 Answers2