jQuery object unexpected behaviour

My code is available below, and here: http://jsfiddle.net/fRpCy/

var input = [];
input.push($('input'));

$(input).live('keydown', function (event) {
    console.log('You have pressed a key!');
});

I would expect this code to 开发者_运维问答respond to keypresses in the console. For some reason, it doesn't. What is the problem with this code? (Note: I know how to fix it, I just don't know what is wrong with it!)

Your code is expecting the $() function to take an array of jQuery objects as an argument. You essentially have this:

$([$('input')])

Per this jQuery documentation, I don't think it supports that. The jQuery function will take:

• a selector string
• an element
• an element array
• a jQuery object
• some HTML
• a function

Important to note is that it will NOT take an array of jQuery objects. An element array is not the same thing as a jQuery object array, though you can obtain an element array from a jQuery object with the makeArray() method if you really wanted to.

There are several alternatives that would work:

The simplest is to not save any intermediary value:

$('input').live('keydown', function (event) {
    console.log('You have pressed a key!');
});

This one gets an actual DOM element into the input array so the input array is a type of array that the jQuery function supports (though I can think of no reason to actually use this code):

var input = [];
input.push($('input').get(0));

$(input).live('keydown', function (event) {
    console.log('You have pressed a key!');
});

Or, if there are multiple input values, just save the jQuery object for future use:

var inputs = $('input');

inputs.live('keydown', function (event) {
    console.log('You have pressed a key!');
});

Or, if you want an element array, you can get that like this:

var input = $('input').makeArray();

$(input).live('keydown', function (event) {
    console.log('You have pressed a key!');
});

Or, if what you really have is an array of jQuery objects and you want to combine those together into a new single jQuery object, this is one way to do that:

// var input is an array of jQuery objects you already have

var allElements = [];   // new empty array of DOM elements
// iterate over array of jQuery objects getting array of DOM elements from each
for (var i = 0; i < input.length; i++) {
    allElements = allElements.concat($.makeArray(input[i]));
}
$(allElements).live(...)

Or, a bit simpler way to do it:

var items = $.map(input, function(item, index) {return($.makeArray(item));});
$(items).live(...)

Or, now I've found the .add() method on a jQuery object:

var $items = input[0];                      // grab first jQuery object in array
for (var i = 1; i < input.length; i++) {
    $items.add(input[i]);                   // add other ones onto it
}
$items.keydown(function() {...});

Incidentally, I'm finding the the array of DOM elements doesn't work with .live('keydown'). I don't know why. It works with:

$(items).keydown(...)

And, since you have an array of DOM elements that already exist, there is no reason to use .live() anyway. You can just use .keydown().

jsFiddle working here: http://jsfiddle.net/jfriend00/qen2m/.

Pretty sure you need to add .each to iterate through the array of objects

jQuery.each(arr, function() {
  $(this).live('keydown', function (event) {
    console.log('You have pressed a key!');
    });

});

It seems like you're creating an array (var input) which has a single element. Element 0 contains an array - returned by $('input') - because you almost certainly have multiple inputs on your page.

Can you try

$('input').live('keydown', function (event) {
    console.log('You have pressed a key!');
});

(untested)