HTML-строка, возвращающая разные значения при входе в систему и при добавлении к элементу - PullRequest
Новая
       14

HTML-строка, возвращающая разные значения при входе в систему и при добавлении к элементу

0 голосов
/ 04 июня 2019

Я пытаюсь динамически генерировать строки, содержащие 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')'="">
 */

}

Как получилось, что записывается и что добавляется, это две совершенно разные строки со всеми добавленными = ""?

1 Ответ

1 голос
/ 04 июня 2019

Ваш визуализированный 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>
...