jQuery事件未在加载的Bootstrap模态窗口中绑定

Question

尝试使用以下代码将动态内容加载到Bootstrap模式中：

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

它可以工作并显示模式窗口。 但是在加载的内容中，还有另一个未绑定的jQuery代码：

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

为什么不触发此submit事件？

Answer 1

仅当文档最初加载到窗口或iframe中时，才触发$(document).ready 。 在您的情况下，您是直接在元素中提取HTML，甚至不会被触发。 虽然您不需要它，但是您应该能够：

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

Answer 2

您可以这样做，因为它对我有用

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

希望能帮助到你

谢谢