Modal does not work after Load div

Question

Well, my problem is, I have a function in an external file

function lista_contas(id) {
    var url = 'lista_dados.php';
    var method = 'POST';
    var params = 'id='+id;
    params += '&select_ano='+document.getElementById('select_ano').value;
    var container_id = 'list_container' ;
    var loading_text = '<div class="span12 responsive" data-tablet="span12 fix-offset" data-desktop="span12" style="margin:0 auto"><img src="img/load.gif"></div>' ;
    // call ajax function
    ajax (url, method, params, container_id, loading_text) ;
}

I call her in an onclick, inside the div list_container are loaded some Tables, which have links to modals, these modals are not opening after the onclick. I call the fashions that:

$('#finaliza_conta').on('show', function() {
    var id = $(this).data('id');
});

$('.conta_finaliza').on('click', function(e) {
    e.preventDefault();

    var id = $(this).data('id');
    document.getElementById('id_conta').value =  id;
    $('#finaliza_conta').data('id', id).modal('show');
});

Note: Modais bootstrap 2.3.2

Is it because the page listing_data.php, is not loading the files referring to the modals?

Answer 1

Try to use:

$('#list_container').on('click', '.conta_finaliza', function(e) {
   e.preventDefault();
   var id = $(this).data('id');
   document.getElementById('id_conta').value =  id;
   $('#finaliza_conta').data('id', id).modal('show');
});

If I understand well the elements with class .conta_finaliza are created dynamically. To be able to define events in them it is necessary to associate the event from a parent element.