Question

我正在触发ajax调用以获取数据以填充选择框。更改此框后，将触发另一个ajax调用以填充下一个选择框。这很好用，当从第二个框中选择一个项目时，它会完美地填充两个带有数据的文本框。

但是，如果在不刷新页面的情况下做出新选择，则第二选择框将无法填充文本框。

呼应var：我创建了var'list'来查看来自ajax的其他数据，以证明数据正确输入。

在第一个ajax调用中： “列表”的第一个回显显示了预期的内容。 “列表”的第二个回显显示了预期的内容。

在第二个ajax调用中： “列表”的第一个回显显示了预期的内容。 “ list”的第二个回显显示了第一个调用的内容。

我尝试在完成的回调和Always回调的不同时间调用此函数。我尝试添加ajax调用的成功元素，并让该函数具有所需的过程，并且仍然是同一件事-它不会更新。

        $('#customer').change(function() {
            var selected = $(this).children("option:selected").val();
            $.ajax({
                type: 'POST',
                url: '/support/incs/worker/worker.getinfo.php',
                data: {info: "names", id: selected},
                dataType: 'json',
                encode: true,
                beforeSend: function() {
                }
            })
            .done(function(data) {
                console.log(data);
                var list = data.additional;
                console.log(list);
                if(data.status == true) {
                    $('#name').html('<option disabled selected>Select a User</option>');
                    $('#name').append(data.payload);
                    $('#name').change(function() {
                        var nameid = $(this).val();
                        console.log(list);
                        $('#email').attr('placeholder', list[nameid]['email']);
                        $('#tel').attr('placeholder', list[nameid]['tel']);
                    })
                } else {

                }
            })
            .fail(function(data) {
                //console.log(data);
            })
            .always(function(data) {

            });
        })

数据应该刷新，以便在做出选择时会相应地更新文本框。但是，由于list变量没有更新，因此代码无法在'list'变量中找到所需的数组键，并且出错了。

控制台输出：

[Echo of returned data]
{status: true, payload: "<option value="4">Finga Ninja</option>", additional: {…}}additional: {4: {…}}payload: "<option value="4">Finga Ninja</option>"status: true__proto__: Object

[First echo of list]
{4: {…}}4: {email: "***@***.com", tel: "01202 789456"}__proto__: Object

[Second echo of list]
{4: {…}}4: {email: "***@***.com", tel: "01202 789456"}__proto__: Object

[Echo of returned data]
{status: true, payload: "<option value="5">Slooty Bartfast</option>", additional: {…}}additional: {5: {…}}payload: "<option value="5">Slooty Bartfast</option>"status: true__proto__: Object

[First echo of list]
5: {…}}5: {email: "***@***.com", tel: "01202 456123"}__proto__: Object

[Second echo of list]
{4: {…}}4: {email: "***@***.com", tel: "01202 789456"}__proto__: Object
staff_home:283 Uncaught TypeError: Cannot read property 'email' of undefined
    at HTMLSelectElement.<anonymous> (staff_home:283)
    at HTMLSelectElement.dispatch (jquery-3.4.1.min.js:2)
    at HTMLSelectElement.v.handle (jquery-3.4.1.min.js:2)

附加的HTML块：

<div class="row">
    <div class="col-6">
        <div class="form-group">
            <label for="customer">Customer</label>
            <select class="form-control" id="customer" name="customer">
                <?php echo $sCustomerList; ?>
            </select>
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <label for="name">Name</label>
            <select class="form-control" id="name" name="name">
                <option disabled selected>Select a User</option>
            </select>
        </div>
    </div>
</div>
<div class="row">
     <div class="col-6">
         <div class="form-group">
             <label for="email">Email</label>
             <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" disabled placeholder="">
         </div>
     </div>
     <div class="col-6">
         <div class="form-group">
             <label for="tel">Contact Number</label>
             <input type="tel" class="form-control" id="tel" name="tel" disabled placeholder="">
         </div>
     </div>
</div>

Answer 1

在我看来，问题是：

您选择一个客户。 js将事件监听器添加到#name选择中。
您选择一个名称。事件侦听器已执行，建议使用电子邮件和电话。
您选择另一个客户。然后，将一个 new 事件监听器添加到#name选择中。以前的未未删除。
您选择一个名称。旧的侦听器尝试读取其list（在您的示例中为4: { ... }，并通过它访问新名称ID（5）。返回undefined。尝试访问此undefined的属性，这导致未处理的错误-js代码崩溃，并且从未执行过正确的代码（新的事件侦听器）。

这表示您在附加新事件时需要删除（用jQuery的术语“ off”）旧的事件侦听器。您有一些选择：

将其保存在变量中，然后在其上调用off()。
在（可能）多个事件侦听器的情况下，将它们保存在一个数组中，并关闭所有它们。
最简单的方法：假设您没有#name的{{1}}事件的其他恒定事件侦听器，则可以在jQuery中关闭所有change处理程序，使用change。参见the docs。
```
elem.off('change')
```

AJAX无法正确更新变量

1 个答案: