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

当我运行程序时，我得到了parapgraph和按钮，但是当我单击按钮时，段落不会改变。我尝试将段落包裹在<div></div>内，但没有任何效果。我最初尝试添加一个新段落并将该文件附加到新段落。我也尝试评论该段落。没有任何效果。我的代码有问题吗？我该如何解决这个问题？

说明：

我看到了this question，this question，this question，this question等等，但它们并没有帮我解决问题。

Answer 1

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

您应该几乎总是使用jQuery's document ready method，它会在执行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);
        }
     });
  });
})

为什么不通过jQuery和AJAX更改段落？

`External Files/text.txt`

`jquery_ajax1.html`

说明：

1 个答案: