javascript - 由按钮触发的 load() 不起作用

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，这让我发疯了……提前致谢。

fiddle :http://jsfiddle.net/gal007/pt2Lzmj9/4/

Answer 1

你有几个问题:

• 当您打算将点击处理程序绑定(bind)到按钮时，您将其绑定(bind)到 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>

那行得通。