Question

我有关于jquery和ajax的问题

我有2个html文件和1个js

的index.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）

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

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

1 个答案: