动态创建 HTML 不重新加载

Question

我有一个问题，我认为它与我如何生成我的 HTML...我使用 JavaScript 函数来生成一些 HTML，但是然后它开始出现故障...让我先粘贴一些我的代码

首先，我的原始 HTML

  <div id="effect">
    <label for="s_effect">Effect: </label>
    <select name="s_effect" id="s_effect" onchange="ne();"> 
      <option value="">Select your Effect</option>
    </select>
    <div id="effect_description"></div>
    <div id="effect_options"></div>
  </div>

然后，我有一个基于数组加载 "s_effect" 的函数（这很好，可以工作，np）。

然后，我的ne()（新效果）函数：

function ne(){
  reset();
  e = g('s_effect');

  if(newEffect(e.options[e.selectedIndex].value)){
    console.log("new effect created");
    updateScreen();
  }
}

它基本上是屏幕的 "resets" 部分（错误跟踪等等，与我的问题无关的东西），然后调用 updateScreen()（注意：g 函数只是 [= 的同义词60=])

转到这个函数（对不起，代码太多了...）

function updateScreen(){
  if(project.effect instanceof Effect){
    lock("instant");
    lock("event");
    showDescription();
    generateOptions();
  }else if(project.effect == null){
    unlock("instant");
    unlock("event");
  }

  if(project.check()){
    generateButton();
  }else{
    npButton();
  }
}

基本上，锁定 window 的某些部分，然后在下面的调用中获得一些 HTML。

generateDescription()，这部分有问题，请执行以下操作：

function generateOptions(){
  g('effect_options').innerHTML = '';
  effectID = project.effect.calculateId();

  if(effectID === false)
    return false;

  g('effect_options').innerHTML = project.effect.parameters.HTMLOptions;
  return true;
}

它调用一个基本上转储一些 HTML 代码的对象属性：

<div>
    <label for="1_color">Color: </label><input type="color" id="1_color" name="1_color" onchange="updateColor('1_color');" value="#FFFFFF">
    <input type="text" name="1_color_rgb" id="1_color_rgb" onchange="updateColor('1_color_rgb');" value="#FFFFFF">
</div>
<div id="extra"></div>
<div>
    <input type="button" value="Add Node" onclick="addNode();">
</div>

最后，addNode() 生成了一个 innerHTML += [new div on "extra"]，但增加了数字（2_color、2_color_rgb 等等）。

function addNode(){
  var count = ++(project.effect.parameters.colorCount);
  g('extra').innerHTML +=
  '<div><label for="' + count + '_color">Color: </label><input type="color" id="' + count + '_color" name="' + count + '_color" onchange="updateColor(\'' + count + '_color\');" value="#FFFFFF" />' +
  '<input type="text" name="' + count + '_color_rgb" id="' + count + '_color_rgb" onchange="updateColor(\'' + count + '_color_rgb\');" value="#FFFFFF" /></div>' + 
}

到目前为止一切正常，甚至 "updateColor" 也能正常工作（它会更新每个输入的值，因此您可以通过填充任何输入来选择颜色）。

当我修改任何通过按钮添加的 x_color 或 x_color 时，问题就出现了...它添加了一个新的 "node" 但重新启动了先前输入的值。

我调试了它，顺便说一句，"extra" 的 innerHTML 显示了所有带有“#FFFFFF”值（初始值）的输入，但在屏幕上，这些值是对的...

如有任何帮助，我们将不胜感激。

PS：我正在使用 chrome。

谢谢！

Answer 1

看来，问题是通过重新分配 g('extra') DOM 元素的 .innerHTML 属性，您是在告诉浏览器重新呈现基于 HTML 的元素 -- 而不是 DOM 元素和其中包含的值。

换句话说，当您添加颜色时，g('extra').innerHTML 会更新为新的 HTML 以呈现额外的颜色选择块（即 2_color）。当用户随后选择一种新颜色时，浏览器将更新 2_color DOM 元素的值，但不一定更新 innerHTML 属性的 g('extra') ].然后，当添加另一个色块时，innerHTML 会再次更新，浏览器会重新呈现它，从而 "resetting" 值。

不要使用 HTML 字符串构建额外的控件，而是使用 DOM 操作（例如 .createElement() 和 .append()）来添加新选项。

Answer 2

澄清一下，正如@Forty3 回答的那样，问题是我每次都在修改 innerHTML，使我的浏览器每次都重新呈现 extra。

按照他的建议，我编辑了我的函数，现在看起来像

function addNode(){
    var count = ++(project.effect.parameters.colorCount);
    var nDiv  = document.createElement("div");
    nDiv.innerHTML = "whatever I was putting...";
    g('extra').appendChild(nDiv);
}

现在可以正常使用了。

谢谢大家的支持

动态创建 HTML 不重新加载

Dynamic created HTML does not reload

html

javascript

innerhtml