Ajax response in bootstrap modal
===

I'm using twitter bootstrap modal and jquery to submit form in that modal. After AJAX response I cannot submit this form again.
In AJAX response a get html data with this <form> content:

    <form action="/foo" id="UserCommentViewForm" method="post" accept-charset="utf-8">
    <input name="data[UserComment][to_email]" type="text"  id="UserCommentToEmail"/>
    <div class="error_notice">Enter email</div>
    </form>	

This is content of modal:

    <div id="modal_product_share" class="modal hide fade int" style="display: none; ">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Info</h3>
	</div>

	<div class="modal-body">
		<form action="/foo" id="UserCommentViewForm" method="post" accept-charset="utf-8">
			<input name="data[UserComment][to_email]" type="text" id="UserCommentToEmail"/>
		</form>	
	</div>

	<div class="modal-footer">
		<a href="javascript:void(0);" class="btn btn-success" id="submit">Send</a>
		<a href="javascript:void(0);" class="btn" data-dismiss="modal">Close</a>
	</div>
    </div>

This is my JS:

    function product_share()
    {
    var el_body = $("#modal_product_share .modal-body");
    var el_form = $("#UserCommentViewForm");
    this.init = function(){
	$("#submit").click(function(){
	    el_form.submit();
	});

	el_form.submit(function(event){
	    event.preventDefault();
	    $.post( '/products/product_share/', el_form.serialize(), function( data )
	    {
		el_body.html(data);
	    });
	});
    };

    this.init();
    }

And in head part of document is this:

    $(document).ready(function() {
        obj_product_share = new product_share();
    });

So, I am guessing that this is something to do with not binding form in ajax response to modal or something...