如果更改事件未绑定然后反弹，则下拉选项“更改”不起作用

Posted 2023-05-09

【中文标题】如果更改事件未绑定然后反弹，则下拉选项“更改”不起作用

【英文标题】：Dropdown option "change" not working if change event is unbound and then rebound

【发布时间】：2015-04-02 19:02:14

【问题描述】：

off() 和 on() 事件绑定到 select 下拉列表时遇到了这个奇怪的问题：

如果我取消绑定，然后将 change 事件重新绑定到 select 下拉列表，我将无法更改下拉列表显示的值。换句话说，即使触发了更改事件，下拉列表中的选定值也不会正确更新。

如果我删除 off() 部分，只留下与 on() 绑定的事件，一切正常，但显然我无法多次阻止同一事件的绑定。

在此处查看实时示例http://jsfiddle.net/z7o11exs/

测试用例：

使用下拉菜单（有效！所选值正确显示在下拉菜单中） 刷新页面。点击第一个按钮（关闭/打开），然后使用下拉菜单。它不能正常工作，因为所选值没有改变 刷新页面。点击第二个按钮（仅在），然后使用下拉菜单。它确实按预期工作。副作用：在第二个按钮上单击 n 次会将更改事件限制为 n 次到下拉元素

代码如下：

//--- This binds the event to the element
function bindEvent()
   $("#myselect").on("change", function()
        console.log("change"); 
    );


//--- remove any change event previously added, then rebind it
function rebindEvent()
    $("#myselect").off("change").on("change", function()
        console.log("change"); 
    );

提前致谢

【问题讨论】：

在小提琴中工作正常。

@MilindAnantwar 您使用的是哪个浏览器？我只针对 Chrome 进行了测试

我只使用 chrome。为两个按钮单击登录控制台。

@MilindAnantwar 是的，日志正在运行，但下拉 UI 未使用所选值更新

【参考方案1】：

尝试使用namespacing:

//--- This binds the event to the element
function bindEvent()
   $("#myselect").on("change.something", function()
        console.log("change"); 
    );


//--- remove any change event previously added, then rebind it
function rebindEvent()
    $("#myselect").off("change.something").on("change", function()
        console.log("change"); 
    );

正如@Karl 所说，使用命名空间是为了：

为您的活动命名可以让您识别该活动。因此，在使用 .off 时，您可以针对要关闭的特定事件。

【讨论】：

抱歉，在我的示例中，我没有得到我必须使用的东西，而不是 something

@BeNdErR 你可以用任何东西替换它。这是一个名字

谢谢，它有效。无论如何我不明白为什么..你能启发我吗？我是否还必须在第一个按钮 on() 中使用命名空间？还是只是在 off() 方法中？

是的，您还需要在第一个按钮上使用，所以稍后您关闭该命名空间事件...

@BeNdErR 两者。基本上，jQuery UI 在更改时绑定自己的事件以更新显示的值。当使用.off 时，您关闭了您绑定的事件，但也关闭了一个 jQuery UI 绑定的事件。为您的事件命名可以让您识别该事件。所以在使用.off时，可以针对特定的事件来关闭。这样，jQuery UI 事件保持不变。

【参考方案2】：

当您删除 change 绑定时，您必须调用 .selectmenu("refresh")。因为默认情况下，change 附加到选择菜单，如提到的here。因此，如果您删除它，您会中断 jQuery Mobile 小部件的“刷新”以直观地显示该值。

看到它工作here。

function rebindEvent()
    $("#myselect").off("change").on("change", function()
        $(this).selectmenu("refresh");
    );