jQuery action on Ajax ResponseText object

Question

Alright, I'm completely new to jQuery, and I'm probably missing something obvious here... What I am trying to do is:

1) use JavaScript + Ajax + PHP to pull a table via ResponseText from a MySQL database (currently working)

2) use jQuery to perform actions on the table (not working)

The first part (1) of the code looks like this:

<script>

function displayPeople(String) {

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("People").innerHTML=xmlhttp.responseText;
        }
    }

    var Query = "?String=" + String;
    xmlhttp.open("GET","library/display_people.php"+Query,true);
    xmlhttp.send();
}
window.onload = displayPeople("");

</script>

<input id="Search_People" placeholder="Search People by Name" size="50" onkeyup="displayTable(this.value)">

<div id="People" style="width:900px; height:200px; overflow-y:scroll;">

The table is dynamically updated while the user types a name in the input field. The PHP file assembles the Query and returns:

$display_string = "<table>";
while($row = mysqli_fetch_array($Results)){
    $display_string .= "<tr>";
    $display_string .= "<td>" . $row['FirstName'] . "</td>";
    $display_string .= "<td>" . $row['LastName'] . "</td>";
    $display_string .= "<td>" . "<button class='editbtn'>edit</button>" . "</td>";
    $display_string .= "</tr>";
}
$display_string .= "</table>";

echo $display_string;

NOW , part (2), I would like to perform some action using jQuery on the table entries (the ultimate goal being this: http://www.9lessons.info/2011/04/live-table-edit-delete-with-pagination.html ).

To start with, I added this jQuery script to the .html taken from another tutorial ( http://jsfiddle.net/tXS6w/ ) which works great on any "static" table, but has no effect whatsoever on the table above! That is, nothing happens if I click on the button which should instead change label...

$(document).ready(function () {
    $('.editbtn').click(function () {
        $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
    });
});

How can I make this work?

My knowledge of JavaScript/Ajax/PHP is quite limited, so the simplest solution is the most welcomed!

Thanks!!!

Answer 1

try something like this

$('#People').on('click','.editbtn',function () {
    $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
});

Reason :

you fiddle code correctly because table is already present in DOM so click event work on it.

But it will not work on element which is dynamically added to DOM for that you have to use jQuery Delegate or On function.

delegate() http://api.jquery.com/on/

On() http://api.jquery.com/delegate/

Answer 2

The buttons with class .editbtn are not yet in the DOM on document.ready because you load the table contents later. You have to add your click event to the buttons after the ajax request is complete.

Answer 3

The edit button is generated dynamically so click event wont work as it is a delegated event, so use .on instead of .click

Instead of

     $(document).ready(function () {
          $('.editbtn').click(function () {
            $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
          });
     });

use this way

   $(document).ready(function () {
         $(document).on.('click','.editbtn',function () {
           $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
        });
   });

now this should work as you intend it to.

for more info on delegated events refer: http://api.jquery.com/on/

I have modified your jsfiddle to showcase delegated events, you can check it.

LIVE DEMO:

http://jsfiddle.net/dreamweiver/tXS6w/291/

Happy Coding :)