0

HTML

<input type="text" id="test" />

<span>0</span>

jQuery

var input = $('input#test');

input.bind('keyup', function() {
    doThis();
});

input.on('input', function() {
    doThis();
});

function doThis() {
    var wordCounts = {};
    var matches = this.value.match(/\b/g);
    wordCounts[this.id] = matches ? matches.length / 2 : 0;
    var finalCount = 0;
    $.each(wordCounts, function(k, v) {
        finalCount += v;
    });
    $('span#word-count').text(finalCount);
}

jsFiddle：http: //jsfiddle.net/YJVPZ/265/

现在doThis()甚至都行不通。doThis()如果我用它来包装它的内容input.bind('keyup', function() { ... }就可以了。我知道这是因为它使用了 undefined this。我怎样才能传递变量input作为参数传递？

有没有办法一起使用 .bind 和 .on 来调用相同的函数，而不是像我现在拥有的两个单独的实例？

4

2 回答 2

1 
input.bind('keyup input', doThis);

小提琴

通过向.bind/传递一个函数， .onjQuery 会自动将this处理程序内部的引用设置为触发所述事件处理程序的元素（在本例中为#test）。

要this手动设置参考，在这种情况下这是不必要的，您可以使用Function.call/ Function.apply：

input.bind('keyup input', function() {
    //in this scope, `this` points to `#test`
    doThis.apply(this, arguments); //sets `this` inside of this `doThis` call to
                                   //the same `this` of the current scope.
});

我们应用arguments，以便doThis还接收传递给事件处理程序的事件对象。在此特定用例中不是必需的，但在代理需要访问传递给原始处理程序的参数的事件处理程序时很有用。

旁注：要使您的代码正常工作，您应该将其移至 DOM 的末尾body或将您的代码包装在DOM 就绪处理程序中，也就是说，将其放在$(function(){/*code here*/});

于 2013-05-01T18:46:04.677 回答
0

尝试这个 -

input.on('input keyup', doThis);
于 2013-05-01T18:47:07.967 回答