Question

我试图在物化模式中选择一个。到目前为止一切正常但是当我用ajax请求刷新模态选择的内容时，选择消失了。

经过调查，我发现innerHTML不是正确的HTML。

这就是我所拥有的：

let modal = htmlResponse.find('#modal')
let modal_old = document.getElementById('modal')
console.log(modal)
console.log(modal.innerHTML)
modal_old.innerHTML = modal.innerHTML

控制台日志如下：

<div class="modal-content">
  <h4>Title</h4>
  <p>Some Text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled selected>Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

其次是

<div class="modal-content">
  <h4>Title</h4>
  <p>Some text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled="" selected="">Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

我们可以看到，disabled和selected被替换为。{1}}和disabled="" selected=""和{{1}}。

在替换innerHTMl之后，模态仍然打开，但是选择不可见。

当我使用Chrome开发工具检查模态（更换ajax之后）时，我会看到第一个输出（选择正确），但没有显示。

这是由innerHTML引起的，还是我使用不当？

顺便说一句，我在使用Chrome（63.0.3239.108）的macOS High Sierra（10.13.2）上进行了测试，这些都是最新的可用更新。该网站托管在一个码头集装箱，但我不相信问题可能来自这里。

Answer 1

经过调查，我发现innerHTML不是正确的HTML。

正确 HTML。

请参阅boolean attributes：

没有赋值给它的布尔属性（例如，检查）隐含地等同于具有分配给它的空字符串的布尔属性（即checked =“”）。因此，它代表了真正的价值。

因此，这两组HTML表达相同的信息，并且都正确地完成。

将HTML转换为DOM然后要求浏览器将DOM转换为HTML将为您提供规范化的HTML，而不是原始的HTML。所以改变是正常的。

当我使用Chrome开发工具检查模态（更换ajax之后）时，我看到第一个输出（选择正确），但没有显示。

问题中没有任何代码可以解释它没有显示。这必须是由代码的其他部分引起的。

Answer 2

问题是由于Materialise中的select的实现。

我没有遇到任何问题，所以我没有正确阅读文档。编写的必须使用jQuery初始化select。

所以我添加了

$('select').material_select()

并重新初始化模态

$('.modal').material_select()

现在一切正常。

Javascript innerHTML搞乱html属性

2 个答案: