的Javascript在页面重载运行

我使用这个JavaScript编辑URL进行排序在WordPress由无编辑插件生成一个列表：的Javascript在页面重载运行

<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存在问题，这可能会导致此工作只有一次页面重新加载？

我已经looked at this但不知道如何将这个例子应用到我上面的代码。

来源

2016-04-25 GT22

您可以使用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>

您可以使用jQuery的语法，而不是纯JavaScript的更换，例如：通过$('#dateHighZ')…
document.getElementById('dateHighZ')…取代它。

来源

2016-04-25 03:50:47 LoicTheAztec

嗨机会，我尝试了上面的例子，但JavaScript是仍以同样的方式工作，即只能在重新加载页面时工作：/关于它可能是什么的任何想法？ – GT22

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

来源

2016-04-25 03:53:34

嗨，我是JavaScript新手@cris_dpa我可以在哪里了解更多关于此？ – GT22

这听起来像是你的JavaScript正在加载页面之前运行。但是当刷新页面从本地加载并且页面/元素在脚本之前已准备就绪时。据MDN：当最初的HTML文档被完全加载和分析

的DOMContentLoaded事件被触发，而无需等待样式表，图片和子框架完成加载。一个非常不同的事件 - 负载 - 只应该用于检测完全加载页面

给它这样的

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

来源

2016-04-25 05:54:17 cmlonder

请参阅上面的代码示例。我在代码中使用了'document.addEventListener（'DOMContentLoaded'，function（）{' – GT22

您是否尝试过'load'而不是'DOMContentLoaded'如上所述？ – cmlonder

对不起，我误解了你的评论。在那里加载而不是DOMContentLoaded。 – GT22

的Javascript在页面重载运行

回答

相关问题