JavaScript在单击时显示复选框，但第一次不起作用

我想在单击事件时显示一些复选框，但问题是当我第一次单击时什么也没发生，但每次单击按钮都运行良好

我尝试了一些在internet上找到的脚本和方法（例如，将

return false；

附加到

onclick=“”

事件中按钮），但我发现的任何东西都没有像我预期的那样对我起作用

必须触发该功能的按钮：

<button id="brandbutton" type="button" class="button">FILTROVAT DLE VÝROBCE &nbsp; &nbsp; &nbsp;<i class="fas fa-caret-down"></i></button>

FILTROVAT DLE VÝROBCE

还有JavaScript代码片段：

<script>
jQuery($ => {
  $('#brandbutton').on('click', () => {
    var html = "<?php echo get_some_tags_man(); ?>";
    $("#someID").html(html).toggle();
    $checkboxes = jQuery("input.brand:checkbox");
    $checkboxes.change(function(){
      window.location.search = '?product_tag=' + $checkboxes.filter(':checked').map(function(){
        return this.value;   
      }).get().join(",");
    });
  });
});
  
</script>

jQuery（$=>{
$（“#brandbutton”）。在（'单击'，（）=>{
var html=“”；
$（“#someID”）.html（html）.toggle（）；
$checkbox=jQuery（“input.brand:checkbox”）；
$checkbox.change（函数（）{
window.location.search='？product_标记='+$checkbox.filter（':checked'）.map（函数（）{
返回此.value；
}).get（）.join（“，”）；
});
});
});

问题是因为您已将复选框的jQuery

change

事件处理程序嵌套在按钮的

onclick

函数中。这意味着当您第一次单击按钮时，

change

事件仅绑定到复选框。在下一次单击时，事件处理程序将再次绑定并运行上一个实例

要解决此问题并更正重复事件处理程序的问题，请在单击按钮外使用单个委托事件处理程序绑定复选框事件处理程序。另外，将按钮单击处理程序移入一个不引人注目的事件处理程序中，而不是在HTML中

试试这个：

jQuery（$=>{
$（“#brandbutton”）。在（'单击'，（）=>{
var html=“”；
$（“#someID”）.html（html）.toggle（）；
});
$（'#someID'）。on（'change'，'input.brand:checkbox'，e=>{
window.location.search='？product_tag='+$checkbox.filter（':checked'）.map（（i，el）=>el.value.get（）.join（“，”）；
});
});

#someID{
显示：无；
}
#品牌按钮{
左边距：15%；
}

过滤法

---

还要注意的是，点击按钮时的

html（）

调用可以通过在页面加载时只执行一次调用来优化，前提是内容从未更改-这似乎与示例的上下文无关。

经典问题。将

.change（）

（或

.click（）

）侦听器附加到另一个函数中。这意味着必须执行一次

brandButton（）

，才能连接侦听器并开始侦听单击事件，然后它们才能工作。@JeremyThille我更改了代码，但问题仍然存在。。有什么建议吗？你已经更改了密码。。。怎么做？@JeremyThille，你可以在这篇（编辑过的）帖子中看到：没有什么变化<代码>$复选框。更改仍在

$（“#brandbutton”）内。在（'click'）

上，您需要首先单击

#brandbutton

将更改侦听器附加到复选框。您好，我尝试用Jquery替换我的JS，但它仍然不适用于我（问题仍然存在），您可以在此处查看并尝试：