Question

I’m having some trouble with .find() on a .live() returning the wrong element.

HTML:

<div id="div1">
    <input type="text" id="txt1" />
</div>

Javascript (jQuery):

$('#div1,#div2').find('input').live('keypress',function() {
   console.log(this);
});

I expect

<input id="txt1" type="text">

to be returned, but instead I’m getting back

<div id="div1">

Any thoughts on why I would be getting the parent container div of the input instead of the input itself?

jsFiddle example

---

Addendum:

I’m not really looking for alternate code that works (I could easily split this into two .live() calls), I’m just trying to find out why this doesn’t work.

Yes, I realize that #div2 does not exist.

Yes, I realize that the documentation for .live() says to only attach .live() to the root selector. However, $(selector).find().live() works in simpler situations.

Answer 1

If you use the code:

console.log($("#div1, #div2").find("input").selector);

You will see

#div1, #div2 input

That is why you are seeing the output of a div when you log ‘this’. As to why this is happening, I am not sure. I would think if you use $(“…”).find, the find parameter would be applied to all arguments in the initial selector.

To solve this I would just write the selector as:

$("#div1 input, #div2 input").live('keypress',function() {
    console.log(this);
});