HTML 字符串在记录时与附加到元素时返回不同的值

Question

我正在尝试动态生成包含 HTML 的字符串，然后将它们附加到文档中。当我 console.log 字符串时，该值完全按照我的预期显示。但是当我将它附加到 HTML 文档时，它会以某种方式发生变化。

for (var i=0; i < roster.length; i++) {
            if (roster[i].attended === 1) {
                var attendedSVG = 'user-check.svg';
            }
            else {
                var attendedSVG = 'user-x.svg';
            }
            var _fkUserID = roster[i]._fkUserID;
            var firstName = roster[i].firstName;
            var lastName = roster[i].lastName;
            var cancelJSFunction = "cancelRequest('"+_fkUserID+"', '"+firstName+"', '"+lastName+"', '"+day+"', '"+time+"');";

            console.log(cancelJSFunction);

/* Returns: "cancelRequest('userID', 'firstName', 'lastName', 'day', 'time')" */

            var html = "<div class='user'><img class='cx' src='x-square.svg' onClick='"+cancelJSFunction+"'></img>"+firstName+' '+lastName+"<img class='attended' src='"+attendedSVG+"'></img></div>";
            $("#roster-container").append(html);

/* Appends:
<img class="cx" src="x-square.svg" onclick="cancelRequest(" userID',="" 'firstName',="" 'lastName',="" 'day',="" 'time')'="">
 */

}

为什么记录的和附加的是两个完全不同的字符串，其中添加了所有 =""？

Answer 1

你渲染的 HTML 看起来像这样

<div class='user'>
    <img class='cx' src='x-square.svg' onClick='cancelRequest('userID', 'firstName', 'lastName', 'day', 'time')'></img> 
    Jane Doe 
    <img class='attended' src='xxxx'></img>
</div>

您的 onClick 仅包含 cancelRequest(，其余部分已损坏。这是使用事件属性的危险。您应该始终绑定您的事件以避免此类问题（并允许您绑定多个事件）。看起来您正在使用 jQuery，因此您可以使用它来简化事件绑定。例如

function cancelRequest(_fkUserID, firstName, lastName, day, time) {
  console.log("Canceling: ", _fkUserID, firstName, lastName, day, time);
}

var _fkUserID = 1, firstName = "Jane", lastName = "Doe", day = 2, time = 3;
  
var cancelJSFunction = function () { 
    cancelRequest(_fkUserID, firstName, lastName, day, time); 
};

var newElements = $("<div class='user'><img class='cx' src='x-square.svg'></img>"+firstName+' '+lastName+"<img class='attended' src='attendedSVG'></img></div>");

$("#roster-container").append(newElements);

newElements.find(".cx").click(cancelJSFunction);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="roster-container"></div>

HTML 字符串在记录时与附加到元素时返回不同的值

HTML string returning different values when logged vs. when appended to element

html

javascript

string

string-concatenation