Javascript在页面重新加载时运行

我使用此javascript编辑url，对wordpress中不可编辑插件生成的列表进行排序：

<script type="text/javascript">
var sortRegex = /\[sort_by\]=\w*/;
function priceHighZ() {
  location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=price');
}
function priceLowZ() {
  location.href = location.href.replace('[sort_order]=DESC', '[sort_order]=ASC').replace(sortRegex, '[sort_by]=price');
}
function dateHighZ() {
  location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=date');
}
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('priceHighZ').addEventListener('click', priceHighZ);
  document.getElementById('priceLowZ').addEventListener('click', priceLowZ);
  document.getElementById('dateHighZ').addEventListener('click', dateHighZ);
});
</script>

var sortRegex=/\[按\排序]=\w*/；
函数priceHighZ（）{
location.href=location.href.replace（'[sort\u order]=ASC'，'[sort\u order]=DESC'）。replace（sortRegex，[sort\u by]=price'）；
}
函数priceLowZ（）{
location.href=location.href.replace（'[sort\u order]=DESC'，'[sort\u order]=ASC'）。replace（sortRegex，[sort\u by]=price'）；
}
函数dateHighZ（）{
location.href=location.href.replace（'[sort\u order]=ASC'，'[sort\u order]=DESC'）。replace（sortRegex，[sort\u by]=date'）；
}
document.addEventListener（'DOMContentLoaded'，函数（）{
document.getElementById（'priceHighZ'）。addEventListener（'click'，priceHighZ'）；
document.getElementById（'priceLowZ'）。addEventListener（'click'，priceLowZ'）；
document.getElementById（'dateHighZ'）。addEventListener（'click'，dateHighZ'）；
});

它只在页面第一次加载并且您重新加载页面后才起作用。它在第一次加载时不工作

DOMContentLoaded是否存在问题，这可能会导致仅在重新加载页面后才能工作

---

我不知道如何将这个示例应用于上面的代码。

您可以使用jQuery.ready（）事件来确保在执行脚本之前加载DOM（如链接示例中所示）。但是在wordpress中，您使用的是

jQuery

，而不是别名

$

。可以在wordpress中使用别名

$

，例如添加

var$=jQuery.noConflict（）：

<script type="text/javascript">

var $ = jQuery.noConflict();

$(document).ready(function() {

    var sortRegex = /\[sort_by\]=\w*/;
    function priceHighZ() {
        location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=price');
    }
    function priceLowZ() {
        location.href = location.href.replace('[sort_order]=DESC', '[sort_order]=ASC').replace(sortRegex, '[sort_by]=price');
    }
    function dateHighZ() {
        location.href = location.href.replace('[sort_order]=ASC', '[sort_order]=DESC').replace(sortRegex, '[sort_by]=date');
    }
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('priceHighZ').addEventListener('click', priceHighZ);
        document.getElementById('priceLowZ').addEventListener('click', priceLowZ);
        document.getElementById('dateHighZ').addEventListener('click', dateHighZ);
    });

});

</script>


var$=jQuery.noConflict（）；
$（文档）.ready（函数（）{
var sortRegex=/\[按\排序]=\w*/；
函数priceHighZ（）{
location.href=location.href.replace（'[sort\u order]=ASC'，'[sort\u order]=DESC'）。replace（sortRegex，[sort\u by]=price'）；
}
函数priceLowZ（）{
location.href=location.href.replace（'[sort\u order]=DESC'，'[sort\u order]=ASC'）。replace（sortRegex，[sort\u by]=price'）；
}
函数dateHighZ（）{
location.href=location.href.replace（'[sort\u order]=ASC'，'[sort\u order]=DESC'）。replace（sortRegex，[sort\u by]=date'）；
}
document.addEventListener（'DOMContentLoaded'，函数（）{
document.getElementById（'priceHighZ'）。addEventListener（'click'，priceHighZ'）；
document.getElementById（'priceLowZ'）。addEventListener（'click'，priceLowZ'）；
document.getElementById（'dateHighZ'）。addEventListener（'click'，dateHighZ'）；
});
});

您可以使用jQuery语法代替纯javascript，例如：

document.getElementById（'dateHighZ'）…
将其替换为
$（'dateHighZ'）…
确保与click事件绑定的Id不会以异步方式加载到DOM中。
这听起来像是在加载页面之前运行javascript。但当您刷新页面时，页面将从本地加载，并且页面/元素在脚本之前已准备就绪。根据MDN：

当初始HTML文档已加载时，将触发DOMContentLoaded事件
已完全加载和分析，无需等待样式表，
完成加载的图像和子帧。一个非常不同的事件负载
-应仅用于检测完全加载的页面

给它一个这样的机会

document.addEventListener('load', function () {
  ...
}

您好，我是Javascript@cris_dpa新手，我在哪里可以了解更多信息？您好，我尝试了上面的示例，但Javascript仍然以相同的方式工作，即仅在重新加载页面时工作：/n对其他可能的内容有何想法？请参阅上面的代码示例。我在code
文档中有这个。addEventListener（'DOMContentLoaded'，function（）{
您是否尝试了
load
而不是我上面提到的
DOMContentLoaded
？对不起，我误读了您的评论。是的，在那里加载而不是DOMContentLoaded也有同样的问题。