jQuery on function is getting bound to the container, why so?
<p>I have a simple jquery code </p>

<pre><code>$('tbody').on("click",$('vote'+rowCount),function(){alert('hi');});
</code></pre>

<p>but the alert shows up when i click anywhere on the table body instead of just showing up on clicking the selector
Why is this happening?</p>

<p>----Edit---</p>

<p>Got it working by writing the element as "#vote"+rowCount instead of writing as $('vote'+rowCount)
But there is another weird problem -
I am creating dynamic rows with this code, but whatever i type in the value of the textbox remains empty (as initialized), why so </p>

<pre><code>$('#add_ans').click(function(){
    var rowCount = $('table tbody tr').length + 1;
    var rowString = '&lt;tr&gt;\
                        &lt;td&gt;&lt;div class="span_5"&gt;&lt;span class="badge badge-success"&gt;'+rowCount+'&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;\
                        &lt;td&gt;&lt;div class="span3"&gt;&lt;input type="text" class="input-large" value="" /&gt;&lt;/div&gt;&lt;/td&gt;\
                        &lt;td&gt;&lt;div class="span2 pull-right"&gt;&lt;b&gt;0&lt;/b&gt;&lt;/div&gt;&lt;/td&gt;\
                        &lt;td&gt;&lt;div class="span2"&gt;&lt;button class="btn btn-success" id="vote'+rowCount+'"&gt;&lt;b&gt;Vote!&lt;/b&gt; &lt;i class="icon-thumbs-up"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;&lt;/td&gt;\
                        &lt;td&gt;&lt;div class="span2"&gt;&lt;button class="btn btn-info" disabled&gt;&lt;b&gt;Reviews&lt;/b&gt; &lt;i class="icon-ok-circle"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;&lt;/td&gt;\
                    &lt;/tr&gt;'
    $('tbody').append(rowString);
    $('tbody').on("click","#vote"+rowCount,voteOption);
});
</code></pre>

<p>and the event handler is </p>

<pre><code>function voteOption(){            
        var rowCount = $('tr').index($(this).closest('tr'));
        alert(rowCount);
        var ans = $('tr:eq('+rowCount+') .input-large').attr('value');
        alert(ans);
}
</code></pre>
