jQuery 不会触发 window 调整大小的功能

Question

我的情况有点奇怪。我创建的脚本效果很好，但并非总是如此。

背景

我正在更改 WordPress 的 YOP POLL 插件滑块的默认值。在我的示例中，滑块是一个 5 刻度，以数字作为它们的值，顶部标签显示给用户。我将滑块设置为的默认值是 3 或中间值。

什么有效？

在桌面浏览器上一切正常。页面已加载，默认设置为中间答案。

什么有问题/没有问题？

在桌面浏览器上：当我调整 window 的大小时，设置值会丢失并回落到值 1（左边的那个）。
在移动浏览器上：（仅在 Android 上使用 Chrome 移动设备进行测试，因为我没有任何其他移动设备）我看到滑块设置在中间值 (3)，当页面完全加载时，它们会退回到左侧 (1)。当他们停留在中间时，以及当您开始向下滚动时，也会发生这种情况。

如果已经在 jQuery 中尝试了很多关于 window 调整大小的建议，但不幸的是，到目前为止 none 似乎是解决方案。

简化代码为：

jQuery(document).ready(function($) {
  function set_slider_defaults() {
    // the code to set the new defaults in the sliders
    console.log("Resize", new Date())
  };

  set_slider_defaults();
  $(window).resize(set_slider_defaults); // <-- this doesn't fire the set_slider_defaults function on window resize... why?!
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

set_slider_defaults 调用似乎没有在 window 调整大小事件上触发。怎么来的？

当我改成：

$(window).resize(function(){
  console.log("window resized");
  set_slider_defaults();
});

然后我确实在控制台日志中看到“window 已调整大小”消息弹出，但 set_slider_defaults 功能未触发...

任何人对我在这里忽略的内容有任何建议吗？

Answer 1

我最终联系了插件作者，我们让它工作了，因为我的原始代码与插件代码冲突。

该解决方案非常好而且简短，因为它现在使用插件自己的代码。只需使用以下内容将文本滑块问题的默认值设置为第三个选项：

jQuery(document).ready(function( $ ){
    $( '.basic-yop-poll-container .basic-question[data-question-type="text-slider"]' ).find( 'input[type="text"]' ).yopPollSlider( 'setValue', 3) ;
});

jQuery 不会触发 window 调整大小的功能

jQuery doesn't trigger function on window resize

jquery

window-resize