时间戳

首页 > 解决方案 > Jquery .html 刷新 dom 但有时不显示在屏幕上？

jquery - Jquery .html 刷新 dom 但有时不显示在屏幕上？

问题描述

我在表单上有一个文本框，其内容由 jquery 函数设置。我对多个文本框使用相同的功能。在某些情况下它工作得很好，虽然似乎在第一个它更新了 DOM，所以当我检查它时，我可以看到文本框的内容已经改变，虽然在屏幕上它显示为空白？

所以第一个实例看起来像：

<div class='form-group director1'>
   <label class='col-sm-2 control-label'>Company Address</label>
   <div class="col-sm-6"><textarea id="a1-companyaddress" class='form-control' name="a1-companyaddress" rows="5" cols="40" style="overflow-y: scroll;">&nbsp;</textarea></div>                              
</div>

第二个看起来像：

<div class='form-group director2'>
  <label class='col-sm-2 control-label'>Company Address</label>
  <div class="col-sm-6"><textarea id='a2-companyaddress' class='form-control' name='a2-companyaddress' rows="5" cols="40" style="overflow-y: scroll;"></textarea></div>                             
</div>

触发更新的代码是一个按钮，如下所示：

$('.companysearch').click(function() {
  $('#loading').show();
  var prefix = $(this).attr('title');
  $.ajax({
    async: false,
    url: 'chouseapi.php',
    type: 'POST',
    data: {
      typ: 'fetchcompanydetails',
      company: $('#' + prefix + '-companynumber').val()
    },
    success: function(data) {
      var bits = data.split('~');
      var cno = $('#' + prefix + '-companynumber').val();
      $('#' + prefix + '-resetsearch').hide();
      $('#' + prefix + '-companyname').val('').show();
      $('#' + prefix + '-companynumberselect').hide();
      $('#' + prefix + '-companysearchbyname').show();

      $('#' + prefix + '-companyname').val(bits[0]);
      $('#' + prefix + '-companyincorporation').val(bits[1]);
      $('#' + prefix + '-companyaddress').html(bits[2]);
      $('#' + prefix + '-companysic').val(bits[3]);
      $('#' + prefix + '-companynumber').val(bits[4]);
      $('#' + prefix + '-companydata').html(bits[5]);
      $('#loading').hide();
    }
  });
});

对于 a1 前缀，除了文本框之外，所有输入都发生了变化，对于 a2 前缀，它非常好。字段 ID 在页面上是唯一的。为什么会这样？

标签： jquerydom

解决方案

首先，async: false从 AJAX 调用的设置中删除。这是非常糟糕的做法。如果您检查控制台，您甚至会看到浏览器本身告诉您不要这样做。

关于您的问题，您应该使用val()更新的值，而textarea不是html()：

$('#' + prefix + '-companyaddress').text(bits[2]);

我还强烈建议您考虑使用 DOM 遍历技术。这样您就可以省略idHTML 中不必要的增量属性，并摆脱'#' + prefix + '-X'JS 中丑陋的串联

推荐阅读