Ajax 包括一个页面答案

【问题标题】：Ajax including a pageAjax 包括一个页面
【发布时间】：2012-08-15 19:52:29
【问题描述】：

我可以在从 Ajax 加载的页面上创建一些功能吗？即。

$(function() {
    $.ajax({
        url: "loaded.php",
        success: function(data) {
            $("#content").html(data);
        }
    });
    $("a#edit").click(function(e) {
        e.preventDefault();
        var newVal = $(this).closest("tr").find("#collapse").html();
        $(this).html(newVal);
    });
});

a#edit 和#collapse 都是loaded.php 的元素，这段代码在index.php 页面中……这段代码可以工作吗？

【问题讨论】：

您是否考虑过只运行它并找出答案？
如果我没有尝试过，我不会在这里问：D，但也许我做错了什么，这就是我在这里问的原因；），如果你需要完整的代码，我会发布它;）
您可能应该问一个问题，而不是“这段代码可以工作吗？”如果这不是您要寻找的答案...
作为对提问者和回答者的一般建议：如果您想将多个功能链接到 $.ajax(...) 调用，请查看 $.Deferred()。

标签： jquery ajax

【解决方案1】：

在将 html 添加到 #content 或使用委托后，您有两个选项在成功函数中附加处理程序。

选项 1

    success: function(data) {
        $("#content").html(data);
        $("#edit").click(function(e) {
            e.preventDefault();
           var newVal = $(this).closest("tr").find("#collapse").html();
           $(this).html(newVal);
        });
    }

选项 2

$(function() {
    $.ajax({
        url: "loaded.php",
        success: function(data) {
            $("#content").html(data);
        }
    });
    $("#content").on('click', '#edit', function(e) {
        e.preventDefault();
        var newVal = $(this).closest("tr").find("#collapse").html();
        $(this).html(newVal);
    });
});

http://api.jquery.com/on/

【讨论】：

【解决方案2】：

如果您的 $("a#edit") 元素是您的 ajax 返回的内容，那么此代码将不起作用。您需要将该代码块移动到成功回调中。

$(function() {
    $.ajax({
        url: "loaded.php",
        success: function(data) {
            $("#content").html(data);
            $("a#edit").click(function(e) {
                e.preventDefault();
                var newVal = $(this).closest("tr").find("#collapse").html();
                $(this).html(newVal);
            });
        }
    });
});

【讨论】：