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

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

Answer 2

你在呼唤：

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

在ajax成功之前。因此，当您尝试将其设为按钮并绑定click事件时，该类的元素尚不存在。请改用：

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

Answer 3

使用live()动态附加事件

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

Answer 4

将这些内容放入成功回调

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

Jquery不使用动态创建的表

4 个答案: