选择器不适用于 ajax 响应答案

【问题标题】：Selectors not working on ajax response选择器不适用于 ajax 响应
【发布时间】：2016-03-27 23:42:20
【问题描述】：

我正在使用 ajax 提交页面并根据用户操作返回内容块以进行引导序列。

如果有一个页面加载并获得 1 个内容元素，则用户单击是或否，这会将下一个内容元素加载到同一空间中（通过 ajax）。

由于某种原因，我的选择器似乎无法处理加载 ajax 的 html。

这是我获取表单的 ajax 函数：

$.ajax({
    beforeSend: function() {
        $("#loader").toggleClass('progress');
    },
    type: 'POST',
    dataType: 'json',
    data: data,
    url: baseUrl+'welcome/user_confirmation_form',
    complete: function( response ) {
    $("#loader").toggleClass('progress');
    },
    success: function( response ) {
        console.log(response);
        $("div.welcome-page > .col").html(response.response);

        },
    error: function( response ) {
        $("#next-steps").html(response.response);
    }
    });

然后我尝试访问提交按钮（已尝试将其作为 ahref 和按钮 type=submit 进行，但似乎没有选择事件。

$('div.welcome-page').on('submit', "user_complete", function(e) {
            e.preventDefault();
            console.log('FOund form');

            var user = $(this).serializeArray();
            console.log(user);
        });

如果我查看源代码，ajax返回的HTML甚至不在dom中，而是在正常查看UI时。

我猜这与它有关？

如何选择所有表单数据？

每当我点击按钮或 ahref 时，它都会再次触发相同的页面。

【问题讨论】：

您什么时候尝试操作表单？ AJAX 是异步加载的。当所有当前脚本都已运行并将控制权交还给浏览器时，将调用处理程序。你确定在 DOM插入之后访问吗？

标签： ajax materialize

【解决方案1】：

如果 user_complete 是您在加载的 html 中的提交按钮上分配的类，那么您缺少一个 .

$('div.welcome-page').on('submit', ".user_complete", function(e) {

但这仅在您使用提交操作时才有效，因为它正在侦听提交事件。也许你想监听点击事件？

【讨论】：

【解决方案2】：

您需要将事件绑定到新添加的 HTML 元素的处理程序。您最初的来电

$('div.welcome-page').on('submit' ...

仅为当时页面上的元素绑定事件处理程序。

您可以将处理程序放入函数中...

var myHandler = function(e) {
  e.preventDefault();
  var user = $(this).serializeArray();
}

然后在您加载新的 HTML 之后，您需要将处理程序绑定到事件。因此，在 AJAX 取得成功后，您将...

success: function( response ) {
  $("div.welcome-page > .col").html(response.response);
  $('div.welcome-page').on('submit', "user_complete", myHandler);
},

【讨论】：