jQuery event is not firing
<p>Im experiencing a problem where the click event assigned to the button tag is not firing upon clicking. There are several buttons with same class attribute but this should not effect the JS since class selector effects all matched elements.</p>

<p>The entire html part is hidding on page load and shown properly when a specific link is clicked, but no event is fired when clicking the submit button. Also would someone be kind and link the url for jquery, bootstrap.css and bootstrap.js if you have it close by so I can try to create the desired effect in jsfiddle. Much obliged</p>

<p>HTML: </p>

<pre><code>&lt;span class="reply-comment" id="&lt;?php echo $imagecomments[1][$i]['commentid']; ?&gt;"&gt;
&lt;div class="row-fluid"&gt;
    &lt;div class="span11 offset1"&gt;
        &lt;textarea class="&lt;?php echo $imagecomments[1][$i]['commentid']; ?&gt;" id="reply-textarea"&gt;&lt;/textarea&gt;&lt;br&gt;
        &lt;button class="btn btn-mini submit-reply-button" data-commentid="&lt;?php echo $imagecomments[1][$i]['commentid']; ?&gt;"&gt;&lt;strong&gt;Submit&lt;/strong&gt;&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>JS:</p>

<pre><code>$('.reply-comment').hide();
$('.submit-reply-button').click(function(e){
    e.preventDefault();
    var commentid = $(this).data('commentid');
    var reply = $(textarea.commentid).val();
    var filename = $('.mainimage').data('filename');
    var imgowner = $('.mainimage').data('imgowner');
    $.ajax({
        type: 'POST',
        url: '?category=addimgcomment',
        data: {
            "commentid" : commentid,
            "imgcomment" : reply,
            "filename" : filename,
            "imgowner" : imgowner
        },
        success: function(data){
            $(textarea.commentid).val("");
            $('.'+commentid+'subcomments').html(data);
        }
    });
return false;
});
</code></pre>
