Jquery function not fired (html injected in second moment)

Question

Sorry for no-too-much clear title.

I'm using Twitter Bootstrap Modal to edit some record.

<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>

And this is the javascript code that open the Modal:

$(".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
});

Finally this is the form injected inside the modal:

<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>

Everything functions as a charme. Now I would submit the form via AJAX.

So I'm adding this:

$('.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;
    });

But form is submitted via regular mode, and not via AJAX. I.e. I don't have neither the event logged in console.

I'm thinking that this is because the form is injected in a second moment in the page and not at

$(document).ready(function() {

Am I right? How I can solve my issue?

Answer 1

You almost certainly need to set up your event handler via delegation:

$(document).on('submit', '.sms-model-form', function(e) {

That attaches a handler at the root of the DOM to catch bubbling "submit" events. Because you're adding your modal dialog content after your code runs, if you do it your way the code will simply have no effect; the ".sms-model-form" selector will match nothing, so no event handler will be attached anywhere.

Using the above form of .on(), you ensure that events involving DOM substructures added dynamically will still be handled as you desire them to be.