无法在一个请求中进行两次 ajax 调用

Question

我正在借助jquery和ajax在php中创建用户配置文件。

该脚本的作用是它有一个左侧导航，这些选项卡从通过 ajax 发出的请求填充内容区域。

所以我点击一个选项卡，它加载一个页面（使用.get()），页面的内容是一个表单。提交表单时，将向 php 文件发出 ajax 请求，该文件使用该数据来确定要执行的操作。现在，除了发送回 DOM 以了解它工作的响应之外，我没有在 php 文件中设置任何内容。

以下是与相关代码相关的 JavaScript：

/**
 * 
 */
$(function() {
        $('form').on('submit', function(event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $.post(target, function(data) {
        if (data) {
            $('#flash').html(data).hide().fadeIn('fast');
        }
    });
  });
});
/**
 * 
 */
$(function() {
    $('#profile-tabs > a').on('click', function(event) {
    event.preventDefault();
    $('#profile-tabs > a').removeClass('active');
    $(this).addClass('active');
    var target = $(this).attr('href');
    $.get(target, function(data) {
        if (data) {
            $('#profile-content').html(data).hide().fadeIn('fast');
        }
    });
  });
});

当我在没有 ajax 的情况下直接加载选项卡时，它提交得很好，唯一不起作用的情况是通过 ajax 请求调用内容。

我刚刚提供的javascript代码在一个名为profile的文件中.js并在jquery之后调用.js

任何建议或想法都会很棒，提前感谢！

Answer 1

尝试将$('form').on('submit' ...替换为 $('body').on('submit', 'form', ... ..我很确定，jQuery 在代码加载时将事件绑定到$('form')元素 - 然后，当您使用 $.get 加载表单时，该事件不会绑定到表单。

使用另一种方法，它将 even 绑定到 $('body') ，它始终存在，并在事件目标为表单元素时执行绑定函数。