Question

首先，这是我的代码的非常简化版本：

HTML：

<form id="add">
    <select id="cat">
        <option selected value="">…</option>
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
</form>
<div id="result_processing"></div>

JavaScript：

$(document).on("change", "#cat", function() {
    var table = $(this).val();
    $.ajax({
        url: "ajax.php",
        type: "post",
        data: {
            table: table
        },
        success: function(result) {
            $("#add").append(result);
        }
    });
});

ajax.php：

$html = '<select id="support">';
$html .= '<option value="S1">Support 1</option>';
$html .= '<option value="S2">Support 2</option>';
$html .= '</select>';
echo $html;

JavaScript：

$(document).on("change", "#support", function() {
    var idsupport = $("#support").val();
    $.ajax({
        url: "ajax2.php",
        type: "post",
        data: {
            idsupport: idsupport
        },
        success: function(result) {
            var append_r = result;
            append_r += '<input type="submit" value="Send" id="send" />';
            $("#add").append(append_r);
        }
    });
});

ajax2.php：

$html = '<input type="text" />
echo $html;

JavaScript：

$(document).on("submit", "#add", function(e) {
    e.preventDefault();
    $.ajax({
        url: "processing.php",
        type: "post",
        data: $("#add").serialize(),
        dataType: "text",
        success: function(result) {
            $("#result_processing").html(result);
        }
    });
});

现在，我希望在表单验证时预先选择#cat。我可以在“成功”部分的提交中添加一些jQuery：

[...]
success: function(result) {
    $("#result_processing").html(result);
    $("#cat").trigger("change");
    $("#cat").val("a");
}
[...]

该代码有效。

现在，我想在第二个“选择”上做同样的事情：#support。但是，由于该支持已加载到ajax中，因此无法正常工作。例如：

[...]
success: function(result) {
    $("#result_processing").html(result);
    $("#cat").trigger("change");
    $("#cat").val("a");
    $("#support").trigger("change");
    $("#support").val("S1");
}
[...]

#support上未选择任何内容。我想原因是：目前，我的DOM中不存在#support。顺便说一句，如果我在此代码之后执行console.log（$（“＃support”）。val（）），则会得到“未定义”。

我想在文档触发器（documentriggerception）中创建文档触发器。像这样：

[...]
success: function(result) {
    $("#result_processing").html(result);
    $("#cat").trigger("change");
    $("#cat").val("a");
    $(document).trigger("change", "#support", function() {
        $("#support").val("S1");
    });
}
[...]

但是它也不起作用。我的一个朋友还建议我创建一个隐藏字段，在其中放置#support值，并在#cat ajax中创建条件以填充#support。但这似乎不是最佳解决方案。

会有谁有更好的主意？

Answer 1

@Heycava解决此问题的正确方法是使用promises！在您的第一个ajax调用中，您需要链接一个完成的操作，该操作将运行另一个请求来填充您的第二个选择：

function func1() {
       $.ajax({ ... }).done(func2);
    }

希望有帮助

在Ajax中加载的选择中触发Ajax

1 个答案: