如何在页面加载时在 ajax 调用中绑定事件处理程序后触发事件

How do I trigger events after event handlers are bound in ajax calls when the page loads?

本文关键字：程序 事件处理 绑定 事件 调用 加载 ajax      更新时间：2023-09-26

问题：

我有 2 个下拉列表，既由数据库中的信息填充，又依赖于一些初始信息(用 php 创建的 json 数组(。第二个下拉列表还取决于在第一个下拉列表中选择的内容。选择第二个下拉列表后，用户选择将保存在另一个数据库表中。如果用户离开然后回来，我希望能够将下拉列表重置为他们之前选择的内容(但仍允许他们更改其选择(。

上下文：

我有一些代码如下所示：

function eventHandler2(event) {
    $.ajax({
        url: "someotherurl.php",
        data: event.data["context"],
        success: function(data) {
            // Do some stuff
        }
    });
}
function eventHandler1(event) {
    event.data["context"][$(event.target).id()] = $(event.target).val();
    $.ajax({
        url: "someurl.php",
        data: event.data["context"],
        success: function(data) {
            $("#element").append(build_input("input2", data));
            $("#element input2").change({"context": event.data["context"]}, eventHandler2);
        }
    });
}
$(document).ready(function() {
    var context = // php generated json array.
    $("#element").append(build_input("input1", context));
    $("#element input1").change({"context": context}, eventHandler1);
});

context包括一些必须在事件处理程序外部初始化并添加到 URRING 事件中的数据，build_input只返回一个表单输入元素的 html 字符串，该元素使用 data 或 someData 确定的选项构建。有时，包含 eventHandler1(和 eventHandler2(的整个 html 元素将被删除并重新初始化。

我的问题是我想使用从数据库中提取的一些默认值初始化两个表单输入(使用 build_input 构建(，但是一旦设置了这些值，我不希望任何重新初始化或事件处理使用这些初始值(这使得将它们添加到上下文对象变得困难，因为在绑定事件处理程序时将使用该对象(。

我想设置输入的值，然后调用更改事件来模拟用户选择这些值，但由于输入元素是使用 ajax 数据构建的，因此在 ajax 请求返回并构建输入元素之前会调用这些更改事件。

我可以通过超时来解决这个问题，但是由于 javascript 在不同的机器上可能运行得更慢，并且 ajax 调用可能需要比正常时间更长的时间，所以我不打算这样做。不过，理想情况下，我想要这样的东西：

$("#element .input1 option[value='" + initial_value + "']").attr('selected', true);
$("#element .input1").change();

在页面加载时调用，但仅在生成和绑定元素后调用。

问题：

有没有办法仅在首次加载页面时触发更改事件(模拟用户选择选项(，并且仅在 ajax 请求构建 html 输入元素返回后触发？

有没有办法仅在以下情况下触发更改事件(模拟用户选择选项(

页面首次加载

并且只有

在 Ajax 请求之后

要构建的 HTML 输入元素是否返回？

这是两个独立的事件。如果需要确保两个事件都已发生，请使用<body onload="loadedBody=true">并利用 success

： 属性$.ajax函数，如下所示： 
function eventHandler1(event) {
    event.data["context"][$(event.target).id()] = $(event.target).val();
    $.ajax({
        url: "someurl.php",
        data: event.data["context"],
        success: function(data) {
            $("#element").append(build_input("input2", data));
            $("#element input2").change({"context": event.data["context"]}, eventHandler2);
            ajaxComplete();
        }
    });
}
var ajaxCompleted;
function ajaxComplete() {
    if((loadedBody == true) && (ajaxCompleted == false)) {
        $("#element .input1 option[value='" + initial_value + "']").attr('selected', true);
        $("#element .input1").change();
    } else {
        setTimeout('ajaxComplete()', 100);
    }
}

不要担心设置超时。它很少被使用，因为页面很可能在 AJAX 结果到达之前加载。

相关文章：