AJAX 未正确更新变量

Question

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

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

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

在第一次 ajax 调用中： 'list' 的第一个回显显示了预期的内容。 'list' 的第二个回显显示了预期的内容。

在第二个 ajax 调用中： 'list' 的第一个回显显示了预期的内容。 'list' 的第二个回显显示了第一次调用的内容。

我尝试在不同时间调用它，在 done 回调和 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) {

            });
        })

数据应该刷新，因此当做出选择时，它会相应地更新文本框。然而，由于列表变量没有得到更新，代码无法在“列表”变量中找到所需的数组键并出现错误。

控制台输出：

[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

在我看来问题是：

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

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

• 将其保存在变量中，然后调用off()。
• 将它们保存在一个数组中，以防（可能）有多个事件侦听器，并关闭所有事件侦听器。

• 最简单的方法：假设您没有其他针对#name 的change 事件的常量事件侦听器，您可以在jQuery 中使用elem.off('change') 关闭所有change 处理程序。见the docs。

  $('#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)
                .off('change'); // must be before the call to 'change()', for not offing the new handler.
              $('#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) {
  
      });
  })