Question

我有这样的HTML：

<div>
    <input type="checkbox" id="checkbox", checked="checked"/>
    <label for="checkbox">Copy values</label>
</div>
<div>
    <input id="source" type="text"/>
</div>
<div>    
    <input id="target" type="text"/>
</div>

我正在尝试实现jQuery代码，将值从source输入复制到target，只有在选中复选框时才会这样。这是我的代码：

var checkbox = $("#checkbox");
var source = $("#source");
var target = $("#target");

var bindFunction = function () {
    var copyValue = function () {console.log("asd");
        target.val(source.val());
    }
    if (checkbox.is(":checked")) {
        source.bind("keyup", copyValue);
    }
    else {
        source.unbind("keyup", copyValue);
    }    
}
checkbox.bind("change", bindFunction);
bindFunction();

但是，它不能按预期工作 - 由于某种原因，copyValue函数不会被绑定。我做错了什么？

这是jsFiddle。

Answer 1

您需要将copyValue功能移到bindFunction功能之外。

这是因为每次单击复选框时都会创建copyValue的新实例，因此unbind针对的函数与最初绑定的函数不同。

var copyValue = function () {
    console.log("asd");
    target.val(source.val());
}

var bindFunction = function () {        
    if (checkbox.is(":checked")) {
        source.bind("keyup", copyValue);
    }
    else {
        source.unbind("keyup", copyValue);
    }    
}
checkbox.bind("change", bindFunction);
bindFunction();

http://jsfiddle.net/5b93H/1/

通过处理程序解除绑定函数的问题

1 个答案: