Javascript在页面重新加载时运行

Question

我正在使用这个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>

它仅在页面第一次加载后才有效，并且您重新加载页面。 它不适用于第一次加载。

DOMContentLoaded是否存在问题，这可能导致只在重新加载页面后才能使用它？

我已经看了这个，但不知道如何将这个例子应用到我上面的代码中。

Answer 1

您可以使用jQuery .ready（）事件来确保在执行脚本之前加载DOM（如链接示例中所示）。 但是使用wordpress你使用jQuery而不是别名$ 。 使用别名$ with 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>

您可以使用jQuery语法而不是纯javascript替换，例如：
document.getElementById('dateHighZ')…用$('#dateHighZ')…替换它$('#dateHighZ')…

Answer 2

确保您与click事件绑定的Id未以异步方式加载到DOM中。

Answer 3

听起来你的javascript在页面加载之前就已经运行了。 但是当你刷新页面从本地加载并且页面/元素在脚本之前就准备好了。 据MDN称：

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

给它一个这样的机会

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