Question

I’m using Twitter Bootstrap modale to show a form loaded by ajax.

I click on the button to show the modale, which btw, will grab its content via ajax :

$('#team_join_modale_show').on('click', function(e) {
    e.preventDefault();
    var href = $(e.target).attr('href');

    $.get(href, function(data) {
        $(data).modal();
    });
});

Then, the modale named “#team_join_modal” is shown (which wasn’t in the DOM before). There is a form “#ajax_form_team_join” on it.

$('#team_join_modal').on('shown', function () {
    $('#ajax_form_team_join').ajaxForm({
        target:        '#errorTeamJoin',
        clearForm:     true
    });
});

The problem is that the snippet $(‘#ajax_form_team_join’).ajaxForm(); is never executed, so my form is not working correctly.

I’ve tried move the event accross my js, changed .on, to .live, to new method .on with no result. What i am missing please ?

Answer 1

You can bind the event right away in the success AJAX function.

$('#team_join_modale_show').on('click', function(e) {
    e.preventDefault();
    var href = $(e.target).attr('href');
    $.get(href, function(data) {
        var $data = $(data);
        $data
          .on('shown', function () {
            $('#ajax_form_team_join', $data).ajaxForm({
              target: '#errorTeamJoin',
              clearForm: true
            });
          })
          .modal();
    });
});

This could be refactored better though.