在对新的PHP页面调用jQuery.load()命令后，Javascript window.addEventListen

Question

我目前有一个基于PHP的网站，它混合了Javascript和；jQuery。在这个页面上，我有一些按钮可以通过刷新div的jQuery脚本加载新页面。这样，我的页面只会刷新一部分，而不是整个页面，因为这样可以避免重新加载一系列其他代码，这些代码需要更长的加载时间，但在浏览我的网站时不需要刷新。

在第一个页面上，我有一个window.addEventListener("load")，一旦页面完全加载，它就会更新。但是，当我通过jQuery脚本加载下一个页面时，window.addEventListener("load")不会触发。

我完全理解为什么会失败，因为从技术上讲，我只是刷新页面的一部分，而不是整个文档。然而，page2.php的window.addEventListener("load")需要什么样的替换？

下面是我的代码，谢谢

page1.php

<!-- page1.php -->
<script>
function NewPage(userID, page) {
$(document).ready(function(){
$("#tabcontent").load("page2.php", {
userID: userID,
page: page
});
});
}
<script>
<?php
echo '<div id="tabcontent">
echo '<script type="text/javascript">
window.addEventListener("load", function() {
window.web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/v3/<key>"))
try {
web3.eth.getBalance("'.$addrHash.'", function (err, result) {
if (result) {
document.getElementById("'.$id.'").innerHTML = web3.utils.fromWei(result, "ether");
}
})
} catch (err) {
document.getElementById("'.$id.'").innerHTML = "-";
} 
})
</script>
<span style="font-weight:bold" id="'.$id.'"></span>';
<button onclick="NewPage(`'.$userID.'`, `.($page-1).`)">Previous Page</button>              
<button onclick="NewPage(`'.$userID.'`, `.($page+1).`)">Next Page</button>
</div>';
?>

page2.php

<!-- page2.php -->
<?php
$userID = $_POST['userID'];
$page = $_POST['page'];
echo '<script type="text/javascript">
window.addEventListener("load", function() {
window.web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/v3/<key>"))
try {
web3.eth.getBalance("'.$addrHash.'", function (err, result) {
if (result) {
document.getElementById("'.$id.'").innerHTML = web3.utils.fromWei(result, "ether");
}
})
} catch (err) {
document.getElementById("'.$id.'").innerHTML = "-";
} 
})
</script>
<span style="font-weight:bold" id="'.$id.'"></span>';

<button onclick="NewPage(`'.$userID.'`, `.($page-1).`)">Previous Page</button>              
<button onclick="NewPage(`'.$userID.'`, `.($page+1).`)">Next Page</button>';
?>

Answer 1

由于jQuery已经在使用中，您应该使用jQuery AJAX功能异步加载页面的一部分(这不是页面加载事件-每个页面请求只有一个(。

我试图简化代码并对其进行一点组织，这样您就可以在整个页面中去掉一些PHP/HTML，并将其限制在开头。此外，如果您愿意，还可以使用always方法，类似于Java中的finally块。这可以在提供的文档链接中阅读。

<script>
/**
* create JS vars for the user and current page.
*/
var userID = <?=$userID?>;    
var curPage = <?=$page?>;    

//-replaced ready event handler with short-hand.    
$(function(e){
$("#tabcontent").load("page2.php", {
userID: userID,
page: page                  
}, function(e){
console.log('page2.php loaded.'); //<--new code here.
});
});
});
/** 
* Create function to handle next content loading.
*/
function nextPage(e){
$.ajax({
url: 'page2.php',
dataType: 'html',
data: '{"userID":userID,"page":}'
}).done(function(data, textStatus, jqXHR){       
/** Just for debugging to see what you have to utilize. Remove for production. */
console.log(data);
console.log(textStatus);
console.log(jqXHR);
/** end debugging. */
/** Load retrieved HTML into tab. */
$('#tabcontent').html(data);
}).fail(function(jqXHR, txtStatus, errorThrown){
/** display friendly error to user. */
$('#tabcontent').html('There has been an error. Please contact ......'));

/** show error message to console and any additional params jQuery provides to figure out issue. */
console.error("Error loading page2: " + txtStatus);
});
});
};
</script>
<button onclick="nextPage(<?=$page--?>)">Prev</button>
<button onclick="nextPage(<?=$page++?>)">Next</button>            
</div>';
</script>
<div id="tabcontent">
</div>