javascript - 从选择中重置/取消绑定(bind)更改事件

Question

我有一个提交按钮，可以打印 select 的当前值。为了防止在选择任何选项之前打印值，我添加了一个 on.change 事件以确保至少选择一个选项。

问题是 select 的内容不是静态的。可以更换。这就是为什么我想在打印任何新值之前重复该过程(取消绑定(bind)旧的更改事件，添加新的事件)。如果我不这样做，可能会打印一些不再可用的旧值。

我尝试过:

$('#smth').off('change');

但它不起作用。即使我删除了该事件，也可以按下按钮。

代码:

HTML:

<input type="submit" value="reset" id="reset" />
<input type="submit" value="change val" id="chv"/>
<br/><br/>
<select id="smth">
    <option selected="1" disabled="1">Choose</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

JS:

$('#smth').on('change',function() {

    $('#sub').on('click', function() {

        $('#container').text($('#smth').val());

    });

});

$('#chv').one('click', function() {

    $('#smth').html('<option selected="1" disabled="1">Choose</option><option>test</option>');

});

$('#reset').on('click',function(){
    $('#smth').off('change');
});

fiddle 示例:

http://jsfiddle.net/JgxFA/1/

Answer 1

您还需要取消绑定(bind)嵌入的 #sub 点击处理程序。

$('#reset').on('click',function(){
    $('#sub').off('click');
    $('#smth').off('change');
});