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

Question

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

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

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

测试用例：

使用下拉菜单（有效！所选值正确显示在下拉菜单中）
刷新页面。单击第一个按钮 (off/on)，然后使用下拉菜单。它不能正常工作，因为所选值没有改变
刷新页面。单击第二个按钮 (only on) 然后使用下拉菜单。它确实按预期工作。副作用：在第二个按钮边界上单击 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"); 
    });
}

提前致谢

Answer 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 时，您可以针对特定事件进行关闭。

Answer 2

删除 change 绑定时必须调用 .selectmenu("refresh")。因为默认情况下，change 附加到 selectmenu，如前所述 here。因此，如果您删除它，您会中断 jQuery 移动小部件从 "refreshing" 以直观地显示该值。

看到它工作 here。

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

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

Dropdown option "change" not working if change event is unbound and then rebound

javascript

jquery

events

jquery-mobile