Jquery not working with dynamically created table

I have a simple webpage that uses the jquery template plugin to dynamically load data into a table using a json call on page load. In that table, I want to put buttons/div or anything clickable that I can then put a function on that will open a new page to edit the contents of that column.

The problem is that none of the jquery stuff works in the buttons that I put in the table. If i put the same button out of the table (i.e. do not dynamically generate it) then it works fine but then I dont get one button per column.

Here is what i have on the page load

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        dataType: "json",
        url: "http://server:8000/categories/list",
        success: function (data) {
                LoadCategories(data['CategoryList']);
        }
    });

    $(".editButton").button(); // using jquery-ui
    $(".editButton").click( function() {
        alert("Button has been clicked");
    });
});

and my template looks like

   <script id="catTemplate" type="text/x-jquery-tmpl">  
        <tr id="$CategoryId">  
            <td> <button id="edit-${CategoryId}" class="editButton"> Edit&开发者_运维技巧lt;/button> </td>
            <td> ${CategoryName}</td>
            <td> ${OtherValue} </td>
        </tr>  
    </script>  

The table loads properly and everything, its just that the jquery stuff is not applied to the dynamically generated stuff. Why is that and how can I get the buttons to do what I want?

Your jquery to add the click handler is likely running before the content is actually in the page. Remember, the Ajax call is asynchronous so your ajax call is just the START of the ajax call. It does not complete until the success function.

I would suggest putting any modifications of the ajax loaded content in the success handler after you've actually added the content to the page.

You can also use:

$(".editButton").live('click', function() {
    alert("Button has been clicked");
});

as the live handler will catch all clicks at the document level and then check to see if you've added click handlers for them there (so it will work even if you specify it before the element is added to the page), but that is somewhat less efficient than operating directly on the objects AFTER they've been added to the page in your success handler.

Your are calling:

$(".editButton").button(); // using jquery-ui
$(".editButton").click( function() {
    alert("Button has been clicked");
});

Both before the ajax has succeeded. So when you try to make it a button and bind a click event, the element with that class doesn't exist yet. Use this instead:

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        dataType: "json",
        url: "http://server:8000/categories/list",
        success: function (data) {
                LoadCategories(data['CategoryList']);
                $(".editButton").button(); // using jquery-ui
                $(".editButton").click( function() {
                    alert("Button has been clicked");
                });
        }
    });
});

use live() to attach event dynamically

$('.editButton').live('click', function() {
   alert("Button has been clicked");
});

Put this lines inside success callback

$(".editButton").button(); // using jquery-ui
$(".editButton").click( function() {
    alert("Button has been clicked");
});