Jquery函数未启动(在第二刻注入html）

很抱歉没有太多清晰的标题。

我正在使用Twitter Bootstrap Modal来编辑一些记录。

<a class="contact" href="#" data-form="/edit/models/sms/{{ @value['fields']['id'] }}" title="Edit">
       <span class="fa-stack fa-lg">
       <i class="fa fa-square-o fa-stack-2x"></i>
       <i class="fa fa-pencil fa-stack-1x"></i>
       </span>
 </a>

这是打开Modal:的javascript代码

$(".sms-model").click(function(ev) { // for each edit contact url
    ev.preventDefault(); // prevent navigation
    var url = $(this).data("form"); // get the contact form url
    $("#smsModelModal").load(url, function() { // load the url into the modal
        $(this).modal('show'); // display the modal on url load
    });
   $("#smsModelModal").modal('show'); // display the modal on url load
    return false; // prevent the click propagation
});

最后，这是注入模态内部的形式：

<div class="modal-body">
            <form role="form" method="post" class="sms-model-form" action="{{ @SERVER.REQUEST_URI }}">
                <fieldset>
                    <legend class="sr-only">Edit</legend>
                    <input type="hidden" name="edit_id_model" value="{{ isset(@sms_model) ? @sms_model[0]['fields']['id']['value'] : '' }}" />
                    <div class="form-group">
                        <label for="title">{{ @lng_label_sms_title }}</label>
                        <input type="text" class="form-control required-field" name="title" value="{{ isset(@sms_model) ? @sms_model[0]['fields']['title']['value'] : '' }}"/>
                    </div>
                    <div class="form-group">
                        <label for="text">{{ @lng_label_sms_text }}</label>
                        <textarea class="form-control" name="text" class="required-field">{{ isset(@sms_model) ? @sms_model[0]['fields']['text']['value'] : '' }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-white pull-right">
                        <i class="fa fa-plus-circle"></i> {{ isset(@sms_model) ? @lng_btn_edit : @lng_btn_add }}
                    </button>
                    <input type="submit" class="btn btn-primary" value="Test" />
                </fieldset>
            </form>
        </div>

每件事都有魅力。现在我将通过AJAX提交表单。

所以我添加了这个：

$('.sms-model-form').on('submit', function(e) {
        console.log('test on submit....');
        e.preventDefault();
        $.ajax({
            type: $(this).attr('method'),
            url: this.action,
            data: $(this).serialize()+'&ajax=TRUE',
            context: this,
            success: function(data, status) {
                $('#smsModelModal').html(data);
            }
        });
        return false;
    });

但表单是通过常规模式提交的，而不是通过AJAX提交的。也就是说，我没有在控制台中记录这两个事件。

我想这是因为表单是在页面的第二个瞬间注入的，而不是在

$(document).ready(function() {

我说得对吗？我该如何解决我的问题？