jQuery function ready for new elements

Question

My function:

jQuery('#allForms td.edit').click(function(e){
    e.preventDefault();
    addTextBox(jQuery(this));
});

doesn't work for new elements which I'm creating in this way:

var output = '<tr><td class="edit">'+values[0]+
    '</td><td class="edit">'+values[1]+
    '</td><td class="edit">'+values[2]+
    '</td><td class="edit">'+values[3]+
    '</td><td><a href="#" class="deleteForm">USUŃ</a></td></tr>';
formsList.find('tr:last').after(output);
addForm.find("input").val('');

When I click at newly added element nothing happens. When I click at elements which was loaded with website all works good.

You can use `jQuery(document).on("click", '#allForms td.edit', function(e){` — Regent, Sep 12 '14 at 10:34
This is a duplicate of so, so many questions. Please use the search next time. — Etheryte, Sep 12 '14 at 10:35
@Nit nevertheless, people still answer it before question is closed :) — Regent, Sep 12 '14 at 10:36

score 0 · Accepted Answer · answered Sep 12 '14 at 10:34

0

You need to use event delegation for attaching events to dynamically added elements:

jQuery('#allForms').on('click','td.edit',function(e){
e.preventDefault();
addTextBox(jQuery(this));
});

answered Sep 12 '14 at 10:34

Milind Anantwar

81,290
25
94
125

score 0 · Answer 2 · answered Sep 12 '14 at 10:35

0

You need to try this

jQuery(document).on("click", '#allForms td.edit', function(e){

answered Sep 12 '14 at 10:35

Rahul Tripathi

168,305
31
280
331

jQuery function ready for new elements

2 Answers2