Jquery不使用动态创建的表

Question

我有一个简单的网页,它使用jquery模板插件在页面加载时使用json调用将数据动态加载到表中.在那个表中,我想把按钮/ div或任何可点击的东西然后我可以放一个函数,这将打开一个新页面来编辑该列的内容.

问题是,我放在表格中的按钮中没有任何jquery东西可以工作.如果我把相同的按钮从表中取出(即不动态生成它),那么它工作正常但是我没有每列一个按钮.

这是我在页面加载上的内容

$(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");
    });
});

我的模板看起来像

   <script id="catTemplate" type="text/x-jquery-tmpl">  
        <tr id="$CategoryId">  
            <td> <button id="edit-${CategoryId}" class="editButton"> Edit</button> </td>
            <td> ${CategoryName}</td>
            <td> ${OtherValue} </td>
        </tr>  
    </script>  

该表正确加载所有内容,只是jquery的东西不会应用于动态生成的东西.为什么这样,我如何让按钮做我想要的？

Answer 1

添加点击处理程序的jquery可能在内容实际位于页面之前运行.请记住,Ajax调用是异步的,因此您的ajax调用只是ajax调用的START.直到成功功能才完成.

在您实际将内容添加到页面后,我建议对成功处理程序中的ajax加载内容进行任何修改.

您还可以使用:

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

因为实时处理程序将捕获文档级别的所有单击,然后检查是否在那里添加了单击处理程序(因此即使在将元素添加到页面之前指定它也会起作用),但这是在将对象添加到成功处理程序中的页面之后直接操作对象的效率稍差.