Question

我第一次尝试使用AJAX和JQuery加载内容。我有一个“容器网页”，我必须显示一些数据分为4个其他网页，所以我只想加载我的整个“容器网页”的一个div。每个页面都包含一个加载下一页的按钮。所以，例如，我有这个简单的HTML：

<button id="btn">Load</button>
<div id="result" onclick="loadContent()"></div>

这个JQuery代码只有一个按钮：

var loadContent = function(){
   $('#result').load('http://jsfiddle.net/gal007/m44cqzrb/show/');
}

但是当我点击时，没有任何反应...... 你能帮助我吗？我知道这应该很容易，但我已经习惯了Js，而不是JQuery，这让我很生气......提前谢谢。

Answer 1

你有几个问题：

当你打算将它绑定到按钮时，你将你的点击处理程序绑定到div。
全局上下文中不提供loadContent()函数。因为你包含了jQuery，所以所有的javascript都是在本地上下文中创建的。看看jsfiddle生成的源代码，你就会明白我的意思。
您正在尝试执行跨域Ajax加载，这通常是不允许的。

你应该试试这个javascript而不是......

$('#btn').click( function() {
    $('#result').load('/gal007/m44cqzrb/show/');
});

更改HTML以摆脱内联JS ......

<button id="btn">Load</button>
<div id="result"> </div>

那会有用。

Answer 2

我会按如下方式分配点击处理程序。

$('#result').click(function() {
   $(this).load('...');
});

（更改＆＃39;＃结果＆＃39;到＆＃39;＃btn＆＃39;如果您想处理按钮上的点击事件！）

我真的不知道＆＃39;负载＆＃39;功能，所以我假设一切都很好。您可能希望调试脚本。并使用jQuery的开发人员版本，这样您就有机会了解正在发生的事情。

Answer 3

你应该点击该按钮而不是div：

<button id="btn" onclick="loadContent()">Load</button>
<div id="result"></div>

并且load仅用于从同一个域加载html ...