1

问题：

我有 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包括一些必须在事件处理程序之外初始化并添加到事件期间的数据，并且只返回使用由orbuild_input确定的选项构建的表单输入元素的 html 字符串。有时，包含 eventHandler1（和 eventHandler2）的整个 html 元素将被删除并重新初始化。datasomeData

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

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

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

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

在页面加载时调用，但仅在构建和绑定元素之后调用。

问题：

有没有什么方法可以触发更改事件（模拟用户选择选项），仅在页面首次加载时并且仅在构建 html 输入元素的 ajax 请求返回之后？

4

1 回答 1

1

有什么方法可以触发更改事件（模拟用户选择选项）

第一次加载页面

并且只有

在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);
    }
}

不用担心 setTimeout。它很少被使用，因为页面很可能在 AJAX 结果到达之前已经加载。

于 2012-05-16T22:06:12.997 回答