переменной Pass в качестве параметра в JQuery

Question

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() { ... }, он будет работать нормально. Я знаю, это потому, что он использует неопределенный this. Как передать переменную input в качестве параметра?

Есть ли способ использовать .bind и .on вместе для вызова той же функции вместо двух отдельных экземпляров, как у меня сейчас?

Answer 1

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

Fiddle

Пропустив функцию .bind/.on Jquery автоматически устанавливает 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 также получает Event object, который передается обработчики событий. Не обязательно в этом конкретном случае использования, но он полезен при проксировании обработчика событий, которому необходимо получить доступ к аргументам, переданным исходному обработчику.

---

Побочное Примечание: Для вашего кода, чтобы работать, вы должны переместить его в конце body или обернуть код внутри DOM ready handler, то есть поместить его внутри $(function(){/*code here*/});

Answer 2

попробовать это -

input.on('input keyup', doThis);