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 调用的开始。直到 success 函数才完成。

我建议在您实际将内容添加到页面后，将对 ajax 加载内容的任何修改放入成功处理程序。

您还可以使用:

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

因为实时处理程序将捕获文档级别的所有点击，然后检查您是否已在此处为它们添加点击处理程序(因此即使您在将元素添加到页面之前指定它也会起作用)，但这比在成功处理程序中将对象添加到页面后直接对对象进行操作效率要低一些。