Question

我正在尝试使用单选按钮从数据库中订购对象。我想通过url传递排序参数，然后在按下单选按钮时重新加载页面。但是，当选中单选按钮时，我无法重新加载页面。

单选按钮有一个类，在JS中，我正在访问它们并将事件侦听器添加到每个按钮。问题是，重新加载可以但无法停止重新加载，或者页面根本无法重新加载。

相关JS代码

const url = (new URL(window.location.href)).searchParams;

let buttons = document.getElementsByClassName('sf');

for(let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', window.location.reload(false));
}

此特定代码无限地重新加载页面。

我尝试过的其他事情：

我使用的是click和change，而不是RadioStateChange，产生的结果相同

我没有添加window.location.reload(false)，而是尝试制作一个函数clickedRadio：

function clickedRadio(radio){
    if(radio.checked)
        window.location.reload(false);
}

此代码不执行任何操作。

我非常确定页面会无限重载，因为我是在循环中分配事件侦听器，但是我还能怎么做呢？

Answer 1

此

buttons[i].addEventListener('click', window.location.reload(false));

没有将函数绑定到事件，它实际上是在调用window.location.reload(false)。

您应该定义一个调用reload的函数，像这样

buttons[i].addEventListener('click', () => window.location.reload(false));

Answer 2

这不符合您的预期：

buttons[i].addEventListener('click', window.location.reload(false));

这将立即执行.reload() ，并且（如果该页面没有重新加载，无论如何都会使其无意义）绑定该函数的 result （即未定义）作为事件监听器。

您不想绑定到重新加载的结果，而是想要绑定到要重新加载的函数：

buttons[i].addEventListener('click', function () {
    window.location.reload(false);
});

现在，这是否会解决您的表排序问题，这本身在这里超出了范围。但这应该可以防止无限重载，并且至少可以将重载绑定到click事件。

Answer 3

.addEventListener希望将回调函数作为其第二个参数，单击按钮后即可执行该函数。目前，您没有添加回调函数，而是在执行一个函数（因此，将使用window.location.reload(false)的返回结果）。

因此，实际上是在页面加载时而不是在单击事件发生时调用回调函数。

相反，一个相对简单的解决方案是将要执行的函数包装在函数本身中。这样，您将能够调用函数，然后执行页面重新加载。

for(let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', _ => window.location.reload(false));
}

选择单选按钮后重新加载页面

3 个答案: