jQuery events are not bind in loaded Bootstrap modal window

Question

Trying to load dynamical content into Bootstrap modal with this code:

$('body').on('click', '.time-estimation', function () {
    var taskId = $(this).data("task_id");
    $("#modal-content").load("/tasks/estimation?task_id=" + taskId, function () {
        $('#myModal').modal({show: true, keyboard: true, backdrop: true});
    });
});

it works and modal window is displayed. But in loaded content there is another jQuery code, that is not binded:

 $(document).ready(function () {
     $("#TaskEstimationTimeForm").submit(function (event) {
         event.preventDefault();
    });
});

Why is not triggered this submit event?

Answer 1

$(document).ready is only triggered when a document is initially loaded in a window or iframe. In your case you're pulling HTML directly in an element, and that even will not be fired. You don't need it though, you should just be able to do:

$("#TaskEstimationTimeForm").submit(function(event) {
    event.preventDefault();
});

Answer 2

You can do this as it is working for me

$('#myModal').modal({show: true, keyboard: true, backdrop: true})
.one('submit','#TaskEstimationTimeForm',function(){
  //your stuff on event here
})

Hope it helps

Thanks