Click event not working on dynamically generated elements

Question

Below is how my edit and delete links are generated

function getRecords(){            
    $.getJSON( "viewcustomers.php", function(data) {
        var items = [];
        var xTd = '';
        var xTr = '';
        $.each(data, function (key, val) {
            var c=0;
            var id=0;
            $.each(val, function (key1, val1) {
                if(c == 0) {
                    id = val1;  
                }
                c++;
                xTd += '<td>' + val1 + '</td>';
            });
            xTd += '<td><a href="customers.php?update='+id+'" id="update">Edit</a></td>';
            xTd += '<td><a href="customers.php?delete='+id+'">Delete</a></td>';
            xTr = '<tr>' + xTd + '</tr>';
            items.push(xTr);
            xTd = '';
            xTr = '';
        });
        $("#records").append(items);
    });
}

Now as you can see i have used id=update in my Edit url.

Now after the record is correctly appearing on my page i am trying to run a code when my edit link is clicked .

// Update existing customer
$("#update").click(function(){
    alert("working");
});

The above piece of code is not working. I have tried placing it inside the document.ready as well as outside but nothing worked.

Can anyone tell me what is wrong here?

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Ashley Medway, Jan 04 '14 at 09:07

Sridhar R · Accepted Answer · 2014-01-04T09:16:35.323

2

Since the #update element are created dynamically you need to use event delegation to register event handlers to these elements.

When you use $('#update').click(....); to register an event handler it will register the handle to only those elements which are already present in the dom at the time of the code execution, in you case since these elements are created after that the handlers will not get attached to the newly created elements

Try with this

HTML

<a href="customers.php?update='+id+'" class="urclassname">Edit</a>

Script

 $("#records").on('click', '.urclassname', function () {
  alert("working");
  });

edited Jan 04 '14 at 09:16

answered Jan 04 '14 at 09:07

Sridhar R

20,190
6
38
35

i like this answer, but as his 'update' appears multiple times it should really be a class :) – Ashley Medway Jan 04 '14 at 09:11
Oh, Thank you so much ... Let 10 mins passes i'll accept it ! – Raheel Jan 04 '14 at 09:12
@AshleyMedway actually i am using bootstrap also so my class is reserved for styling – Raheel Jan 04 '14 at 09:12
@AshleyMedway Yes i agree with it – Sridhar R Jan 04 '14 at 09:13
Is it possible that i can grab the update=1 part of the href? – Raheel Jan 04 '14 at 09:13
if you can look again on my code the url is generating with unique id same as my database primary key. – Raheel Jan 04 '14 at 09:18
1

@Raheel i am talking about your a href id .that must be unique to assign on click – Sridhar R Jan 04 '14 at 09:18
so you mean instead of using #update i make it .update ? But then who will i apply css on my links if i use class for jquery ? – Raheel Jan 04 '14 at 09:20
Ok i found out the way... Thank you so much ! – Raheel Jan 04 '14 at 09:23

Pranav C Balan · Answer 2 · 2014-01-04T09:18:42.430

1

Try this

Change id to class ,id should be unique

 xTd += '<td><a href="customers.php?update='+id+'" class="update">Edit</a></td>';
                     ________________________________^_________________

$(document).on('click', '.update', function() {
    alert("working");
});

edited Jan 04 '14 at 09:18

answered Jan 04 '14 at 09:08

Pranav C Balan

113,687
23
165
188

1

Use `.on()` — as of jQuery 1.7 the use of .`live()` is deprecated – Sridhar R Jan 04 '14 at 09:12

score 1 · Answer 3 · answered Jan 04 '14 at 09:10

1

You need to use event delegation also since there are multiple elements use class for the elements like <a href="customers.php?update='+id+'" class="update">Edit</a>

then

$("#records").on('click', '.update', function () {
    alert("working");
});

answered Jan 04 '14 at 09:10

Arun P Johny

384,651
66
527
531

score 0 · Answer 4 · answered Jan 04 '14 at 09:21

click not work with dynamically generated elements. As it is bind with elements on body load and element which appended after that do not trigger the event, for this you need event delegation. so try:

$("#records").on('click', '.update', function () {
    alert("working");
});

Click event not working on dynamically generated elements

4 Answers4