首页 > 解决方案 > 如何在 onclick 事件之前触发 onchange 事件(Bootstrap 4 单选按钮)

问题描述

所以,这是我的问题 - 在我的进度滑块中,我有一部分页面我想在单击的单选按钮上收集数据,并限制下一个的可能性,依此类推(持续四页),为此,我使用了 onchange 命令,从 div 中选中的单选按钮的 id 中获取了一个数字,然后,在箭头单击命令上,我使用 .slice 命令获取值高于我选择的值的按钮之前并禁用他们和他们的父母与一个班级。现在,当我尝试使用 .click 而不是 .change 时,无论出于何种原因,click 事件都会在设置值之前触发,并且当页面翻转时,.slice 命令最终会使用旧值(默认为 0,因此slice 命令会删除除第一个以外的所有选项),基本上,它会在页面切换后更新剪切值。

我正在使用我为我的 ASP.NET 学校网站的首选项部分制作的滑块(带页面),并希望这样做,当您可以单击每个页面中的单选按钮时,您可以转到下一页,而不是除了使用现有的箭头按钮之外,足够简单(我认为) - 只需这样做,当您单击标签时,单选按钮的父级(这就是它们在 Bootstrap 中的构建方式),您触发点击事件右箭头,但这会导致我之前提到的问题。
我尝试了一些方法来对抗它 - 首先,我尝试将它放在这些页面上禁用点击输入,将点击事件放在 onchange 事件中 - 这有效,但产生了一个单独的问题,值正在更新,但是无论出于何种原因,活动类都没有赋予父标签,这是一个巨大的问题,因为您可以使用箭头返回并更改值,而当您返回它时,您看不到它被选中,就像你可以看到其他单选按钮一样,我也尝试过组合它,但我所做的一切似乎都不起作用,地狱,我什至尝试在更改命令中提供活动类,但无济于事,唯一接近的是我忘记在箭头单击事件的 if 语句之一中添加 $ 的错误,修复错误或删除 if 语句使活动类在这些页面中不再工作,这太奇怪了......我还应该提到我还尝试将 .click 放在更改事件的末尾,使用 .click标签而不是 .change 等等..

第一个功能是锁定页面,直到用户按下单选按钮,第二个功能是单击单选按钮移动页面,第三个选项应该是如果您返回页面并想要按相同的答案来获得下一页(因为 .change 不会检测到它)

现在,它只使用第二个功能转到另一个页面 - 双击(仅在这四个页面上,在其他页面上工作得很好),当然,箭头仍然有效。

非常感谢您的帮助

标签: jquery

解决方案


在 javascript 中的这些类型的情况下,您必须设置超时并推迟一些毫秒的处理。有时有更好的解决方案,但有时在 JS 中是唯一的方法。

在您当前的事件代码上放置一个围绕您的代码的 setTimeout:

setTimeout(function() { ...your current code... }, 1);

并测试。有时您必须根据事件稍微增加 1ms 的延迟,最高可达 333ms(超过 333ms 是人类可感知的)。

此外,如果在超时时触发某些命令(如导航),则会被禁止,但如果超时恰好在主输入事件之后,则允许操作。因此,在使用延迟代码时增加延迟并不是一个好主意,建议对各种浏览器和设备进行测试。


推荐阅读