Javascript 为什么赢了'；该段落不能通过jQuery和AJAX进行更改吗？_Javascript_Jquery_Html_Ajax

Javascript 为什么赢了'；该段落不能通过jQuery和AJAX进行更改吗？

javascript jquery html ajax

Javascript 为什么赢了'；该段落不能通过jQuery和AJAX进行更改吗？,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我试图将任意段落更改为外部文件中的内容。这是：外部文件/text.txt：以下是有助于更改段落的文件： jquery\u ajax1.html：。。。 ... $（“按钮”）。单击（函数（）{ $（'#p1'）.load（'外部文件/text.txt'，函数（responseText、statusTxt、xhr）{ 如果（statusTxt==“成功”）{ window.alert（“外部内容加载成功！”）； } 如果（statusTxt=='error'）{ 警告（“您有问题。”+“\n

我试图将任意段落更改为外部文件中的内容。这是：

外部文件/text.txt

：以下是有助于更改段落的文件：

jquery\u ajax1.html

：

。。。
...
$（“按钮”）。单击（函数（）{
$（'#p1'）.load（'外部文件/text.txt'，函数（responseText、statusTxt、xhr）{
如果（statusTxt==“成功”）{
window.alert（“外部内容加载成功！”）；
}
如果（statusTxt=='error'）{
警告（“您有问题。”+“\n”+xhr.status+”：“+xhr.statusText”）；
}
});
});
...
单击下面的按钮更改我
单击以使用jQuery和AJAX更改段落！

当我运行程序时，我会得到图表和按钮，但当我单击按钮时，段落不会改变。我试着把这段文字包装在

中，但没有效果。我最初尝试添加一个新段落，并将文件附加到新段落。我还试着把这段话注释掉。什么都没用。我的代码有问题吗？我怎样才能解决这个问题

笔记：

我看到了、、和更多，但它们并没有帮助我解决问题

在呈现HTML之前，Javascript正在运行，这意味着您正在将单击侦听器附加到尚未在DOM中创建的按钮。因此，您的real按钮没有连接到click侦听器，因为它是在Javascript执行之后加载的

您几乎应该始终使用，它将在执行Javascript之前等待文档完全加载，以确保您想要与之交互的元素已经加载

在您的情况下，您应该能够在Javascript中实现这一点

$（函数（）{
$（“按钮”）。单击（函数（）{
$（'#p1'）.load（'外部文件/text.txt'，函数（responseText、statusTxt、xhr）{
如果（statusTxt==“成功”）{
window.alert（“外部内容加载成功！”）；
}
如果（statusTxt=='error'）{
警告（“您有问题。”+“\n”+xhr.status+”：“+xhr.statusText”）；
}
});
});
})

您的JavaScript在HTML之前声明，因此

$（“按钮”）

找不到任何内容。将脚本移动到HTML下方或将其包装在

$（“文档”）.ready（）处理程序中。哦，我已经有了$（document.ready（）
处理程序，但我没有将代码放入其中！现在我明白了！但是，为什么要使用$（function（）{}）
方法呢？这不是有点难读吗？$（function（）{}）
只是$（document.ready（function（）{}）的缩写，所以你可以随意使用你喜欢的。我使用速记版本，因为一旦你习惯了，它会更干净一些。
jQuery and AJAX do go well together!

...
<script language="Javascript">
...
$('button').click(function() {
   $('#p1').load('External Files/text.txt', function(responseText, statusTxt, xhr) {
        if(statusTxt == 'success') {
            window.alert("External content loaded successfully!");
        }

        if(statusTxt == 'error') {
            window.alert("You've got problems." + "\n" + xhr.status + ": " + xhr.statusText);
        }
   });
});
</script>
<body>
...
<p id="p1">Click the below button to change me!</p>
<button>Click to change paragraph using jQuery and AJAX!</button>
</body>