Question

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

我点击按钮显示模式，btw将通过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”的模式（之前不在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
    });
});

试试这个。

使用ajax加载的内容不执行Js代码

2 个答案: