为什么不通过jQuery和AJAX来改变段落呢?

Why won't the paragraph be changed via jQuery and AJAX?

本文关键字：改变 段落呢 AJAX jQuery 为什么不      更新时间：2023-09-26

我试图从外部文件更改任意段落的内容。

External Files/text.txt:

jQuery and AJAX do go well together!

下面是帮助修改段落的文件:

jquery_ajax1.html:

...
<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>

当我运行程序时，我得到段落和按钮，但是当我点击按钮时，段落没有改变。我试着在<div></div>内包装段落，但没有任何效果。我最初尝试添加一个新段落，并将文件附加到新段落。我还试着把这段话注释掉。毫无效果。我的代码有问题吗?我该如何解决这个问题?

指出:

我看到了这个问题，这个问题，这个问题，这个问题，还有更多的问题，但他们没有帮助我解决我的问题。

您的Javascript在HTML呈现之前运行，这意味着您正在将单击侦听器附加到尚未在DOM中创建的按钮上。因此，你的真正的按钮没有得到一个点击监听器附加到它，因为它是在你的Javascript已经执行后加载的。

你应该总是使用jQuery的document ready方法，它会在执行Javascript之前等待文档完全加载，确保你想要与之交互的元素已经加载。

在你的情况下，你应该能够在你的Javascript中做到这一点。

$(function() {
  $('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);
        }
     });
  });
})
相关文章：