need help with jquery selector
<p>I have a following HTML :</p>

<pre><code>&lt;ul class="someclass"&gt;
&lt;li id="1"&gt;
&lt;button type="button" class="grey"&gt;&lt;/button&gt;
&lt;/li&gt;
&lt;li id="2"&gt;
&lt;button type="button" class="grey"&gt;&lt;/button&gt;
&lt;/li&gt;
&lt;li id="44"&gt;
&lt;button type="button" class="grey"&gt;&lt;/button&gt;
&lt;/li&gt;
&lt;li id="54"&gt;
&lt;button type="button" class="grey"&gt;&lt;/button&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Now here is what I'm trying to accomplish with jquery :</p>

<p>When button is clicked to find out <code>id</code> of parent <code>li</code>, here is how I tried and failed:</p>

<pre><code>$(".grey").live('click', function(){
alert($(this).parents("li").attr("id"));
alert($(this).parents("li:first").attr("id"));
});
</code></pre>

<p>Both give me <code>null</code> alerted, how can I do this ?</p>

<p><strong>QUESTION UPDATE</strong></p>

<p>Ah yes, I forgot to mention that this <code>button element</code> is not exactly in the <code>li</code> tag, its created on-the-fly when <code>li</code> is <code>hovered</code>, using <code>append</code>? I wrote this example just so you could get Idea what I'm trying</p>

<p><strong>ANOTHER UPDATE</strong> :</p>

<p>When I try just <code>$(this).closest("li");</code> I get <code>[object Object]</code> alerted but if I add <code>attr("id");</code> I get null</p>
