I'm looking to determine which
element had the last focus in a series of inputs, that are added dynamically by the user. This code can only get the inputs that are available on page load:
$('input.item').focus(function(){
$(this).siblings('ul').slideDown();
});
And this code sees all elements that have ever had focus:
$('input.item').live('focus', function(){
$(this).siblings('ul').slideDown();
});
The HTML structure is this:
<ul>
<li><input class="item" name="goals[]">
<ul>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
</ul></li>
</ul>
<a href="#" id="add">Add another</a>
On page load, a single input loads. Then with each add another, a new copy of the top unordered list's contents are made and appended, and the new input gets focus. When each gets focus, I'd like to show the list beneath it. But I don't seem to be able to "watch for the most recently focused
element, which exists now or in the future."
To clarify: I'm not looking for the last occurrence of an
element in the DOM tree. I'm looking to find the
element that currently has focus, even if said
element is not present upon original page load.
So in the above image, if I were to focus on the second
element, the list of words should appear under the second
element. My focus is currently on the last
element, so the words are displayed there.
Do I have some sort of fundamental assumption wrong?
