Js代码没有执行ajax加载的内容

Question

我使用Twitter Bootstrap modale来显示由ajax加载的表单。

我按一下按钮，显示modale，这顺便说一句，将通过AJAX抓住它的内容：

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

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

然后，显示名为“#team_join_modal”的modale（这是不是在DOM之前）。有一个表单“#ajax_form_team_join”。

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

的问题是，该段$（ '＃ajax_form_team_join'）给ajaxForm（）。永远不会执行，所以我的表单不能正常工作。

我试着将事件移过我的js，将.on改为.live，以新方法.on没有结果。请问我错过了什么？

Answer 1

您可以在成功的AJAX函数中立即绑定事件。

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

虽然这可以被重构得更好。

Answer 2

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

试试这个吧。