javascript - Ajax-loaded-content 更改调用它的文档中的元素

Question

我有一个关于 jquery 和 ajax 的问题

我有 2 个 html 文件和 1 个 js

索引.html

<h1><div id="parent_header">This is parent header</div></h1>

<button id="my_button">Click here to load child.html</button>

<div id="result"></div>

child.html

<button id="child_button">This button should change parent header</button> <p />

现在，来自 index.html 的 my_button 打开 child.html 并将其加载到结果 div 中：

$(document).ready(function() {
$("#my_button").click(function() {
    $.ajax({
        url: "child.html",
        dataType: "html",
        success: function(result) {
            $("#result").html(result);
        }
    });
});
});

成功地。现在我希望 child.html 中的 child_button 更改 index.html 中的父标题。如何实现 ajax-loaded-content 更改调用它的文档中的某些内容？（不使用 iframe）

演示：http ://www.lobart78.byethost24.com/ （在 jsfiddle 上不可能）

谢谢

Answer 1

$(document).ready(function() {
$("#my_button").click(function() {
    $.ajax({
        url: "child.html",
        dataType: "html",
        success: function(result) {
            $("#result").html(result);
            $("#child_button").on("click",function() { $("#parent_header").html("just changed for horror!"); });
        }
    });
});
});