Question

我有两个选择下拉列表。在更改第一个时，会根据getFields()的响应创建一个默认表，这是一个要求。

第一次下拉：

$("#selectModel").change(function () {

        $.ajax({
            type: "GET",
            url: '/',

            success: function (results) {

                $.each(results, function (key, value) {
                    $("<option></option>", {
                        value: value.id,
                        text: value.name,
                        name: value.company.id,
                        id: value.id
                    }).appendTo("#selectRole");
                });
            },
            error: function () {
            }
        });

        // REQUEST FOR FIELDS
         getFields(function (results) {
             createTable(results);
         });

        $("#editPermissionTable").attr("disabled", true);
    });

它还会创建第二个选择下拉列表。这部分按预期工作。当我更改动态创建的下拉列表（#selectRole）时，问题就开始了。

预期结果：当我更改selectRole下拉列表时，它应重置默认表格，然后根据来自ajax请求的新响应更改行值。

问题： 当我更改selecRole下拉列表时，它仅重置表，但不会根据新响应更改行。

斯坦格事实：在Chrome调试器上，我看到它在第二次ajax调用后确实应用了新的HTML，但它再次更改为默认值。

第二次下拉：

$("#selectRole").change(function () {

        // REQUEST FOR FIELDS
         getFields(function (results) {
             createTable(results);
         });


        $.ajax({
            type: "GET",
            url:  "/permissions",

            success: function (results) {

                // CHECK PERMISSION TABLE FOR FIELD ID
                $.each(results.data, function (key, val) {
                    $("#permissionTable tr").each(function () {
                        // IF MATCH FOUND REMOVE PREVIOUS AND ASSIGN NEW VALUE
                        if (this.id == key) {
                            $(this)
                                .find("td")
                                .remove();
                            $(this).append(
                                '<td><div class="form-check text-center"><input disabled class="form-check-input" type="checkbox"  name="' +
                                val.remove_perm +
                                '"> </div></td><td> <div class="form-check text-center"> <input disabled class="form-check-input" type="checkbox" name="' +
                                val.view_perm +
                                '"> </div></td><td> <div class="form-check text-center"> <input disabled class="form-check-input" type="checkbox"  name="' +
                                val.create_perm +
                                '"> </div></td><td> <div class="form-check text-center"> <input disabled class="form-check-input" type="checkbox" name="' +
                                val.update_perm +
                                '"> </div></td>'
                            );
                        } 
                    });
                });
            },
            error: function () {

            }
        });
    });

getFields（）

var createTable = function (tableData) {
        //CLEAR PREVIOUS TABLE
        $("#permissionTable").empty();

        // CREATE TABLE
        $.each(tableData.fields, function (key, value) {
            $("#permissionTable").append(
                '<tr id="' +
                value.id +
                '"> <th class="text-muted">' +
                value.label +
                '</th> <td><div class="form-check text-center"> <input disabled class="form-check-input" type="checkbox"  name="' +
                value.remove_perm +
                '"> </div></td><td> <div class="form-check text-center"> <input disabled class="form-check-input" type="checkbox" name="' +
                value.view_perm +
                '"> </div></td><td> <div class="form-check text-center"> <input disabled class="form-check-input" type="checkbox"  name="' +
                value.create_perm +
                '"> </div></td><td> <div class="form-check text-center"> <input disabled class="form-check-input" type="checkbox" name="' +
                value.update_perm +
                '"> </div></td></tr>'
            );

        });
    };

    //REQUEST FOR FIELDS
    var getFields = function (callback) {
        // PARAM VALUES
        var model_id = $('#selectModel')
            .children(":selected")
            .attr("id");

        $.ajax({
            type: "GET",
            url: '/fields'
            success: callback,
            error: function () {

            }

        });
    };

对于长代码描述很抱歉，但我无法弄清楚我做错了什么。如果我在getFields()上应用async：false则可行。请帮我确定一下这个问题。

Answer 1

对于jQuery中的这些动态过程，我建议将这些控件的事件处理程序绑定到实际的文档级别。如果您自动将行添加到glClearColor(0, 0, 0, 0);等，则必须执行此操作。

所以我会稍微修改你的代码：

<table>

我只是提出一个建议。我没有办法测试你的确切场景，但我想我会分享我之前的一些经历。

干杯。

同一个更改函数中的多个ajax调用无法正常工作

1 个答案: