时间戳

首页 > 解决方案 > 连续的 html() 调用覆盖第一个

javascript - 连续的 html() 调用覆盖第一个

问题描述

这是我的jQuery

 var defaultControlClassic =  "<div id='control-textarea-wrapper' class='control'>" + "\n";
    defaultControlClassic +=   "<textarea id='control-textarea' tabindex='1000' rows='1'></textarea>" + "\n";
    defaultControlClassic +=       "<button type='button' class='btn btn-link btn-icon'><i class='material-icons input-send'>&#xE163;</i></button>" + "\n";
    defaultControlClassic += "</div>" + "\n";


    var msg = jsonResponse.html;

    intent = jsonResponse.intent;

    //Create a dom node out of the response
    var div = document.createElement('div');
    div.innerHTML = msg.trim();
    var domMsg = div.firstChild;


    //If Typing animation is happening time to remove it
    $('.sender-action').parent('.response').remove();

    //Get the Control from the response
    var control = domMsg.getElementsByClassName("control")[0];

    //Remove the current control from the domMsg
    $(domMsg).find('.control').remove();

    //Use default control if none specified
    if (control === undefined) control = defaultControlClassic;

    //Add the control

    $('.step-next .controls').html(control);
    $('.fixed-control').html(control);

这适用于“defaultControlClassic”的上述文本值

但是当“控制”被这个分配时......

var control = domMsg.getElementsByClassName("control")[0];

第一次调用 html() 有效，第二次也有效，但第一次被第二次覆盖

  $('.step-next .controls').html(defaultControlClassic);
    $('.fixed-control').html(defaultControlClassic);

这是html

 <div class="chat-window" >
        <header class="chat-header">
            <div class="modern-nav d-flex justify-content-between">
                <button type="button" class="btn btn-link btn-previous" style="display: none;"><i class="fal fa-long-arrow-left"></i> Previous</button>
                <div class="spinner">&nbsp;</div>
                <button type="button" class="btn btn-link btn-restart" style="display: none;">Restart </button>
            </div>
            <div class="progress" >
                <div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">1%</div>
            </div>
        </header>
        <div class="chat-body">
            <div class="step-container">
                <form class="step-form step step-next">
                    <div class="messages" class="" ></div>
                    <div class="controls" class="" ></div>
                </form>
            </div>
            <div class="fixed-control"></div>
        </div>

标签： javascriptjquerydom

解决方案

抱歉，伙计们-这是一个令人困惑的问题。

html() 除非它实际上是 html，否则它不起作用 - 出于某种原因，如果它是一个对象，它会被覆盖

这是一种解决方案

//Use default control if none specified
    if (control === undefined)
        control = defaultControlClassic;
    else
        control = $('<div>').append($(control).clone()).html();

推荐阅读