AJAX Form won't update after being submitted - ajax

Question

I have been toubleshooting an ajax request for a contact form. The form will load field errors with an ajax request, but it wont submit the form after the response. One thing to note is that I am trying to submit the form with a button outside the form tag, but even with one inside the tag it only submits once.
My ajax script:
$('#modal-form').submit(function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(data) {
if (!(data['success'])) {
// Here we replace the form, for the
form.replaceWith(data['form_html']);
$('#modal-form').off("submit");
}
else {
// Here you can show the user a success message or do whatever you need
$('#myModal').modal("hide");
}
},
error: function () {
$('#error-div').html("<strong>Error</strong>");
}
});
});
My form:
{% load crispy_forms_tags %}
<div class="container">
<!-- Modal -->
<div class="modal fade container-fluid" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-envelope"></span> Email Me</h4>
<div id="success-div"></div>
</div>
<div class="modal-body">
<div class="row-fluid">
<div id="form">
<form id="modal-form" class="form-horizontal" method="POST" action="{% url 'emailme_success' %}">
{% csrf_token %}
{% crispy emailme_form emailme_form.helper %}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<div id="error-div" class="pull-left"> </div>
<button name="submit" type="submit" class="btn btn-success pull-right" id="modal-submit" form="modal-form"><span class="glyphicon glyphicon-send"></span> Send</button>
</div>
</div>
</div>
</div>
</div>