Question

我正在使用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和按钮类型=提交但似乎没有选择事件。

$('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它只会再次触发同一页面。

Answer 1

如果user_complete是您在加载的html中的提交按钮上分配的类，那么您就错过了。

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

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

Answer 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);
},

选择器不处理ajax响应

2 个答案: