jquery onchange () - как поместить переменную в кавычки?

Question

Я строю строку HTML в jQuery для добавления к таблице в HTML и хочу захватывать при изменении входного значения. Я пытаюсь передать переменную obj.attNewChum в onchange следующим образом:

contents = contents + "<input type='text' id='" + obj.cdId + "' name='" + obj.cdId + "' value='" + attMeeting + "' onchange='attendanceUpdateFunction(this.id, this.value, "+obj.attNewChum+")'>";

Однако, это дает следующую ошибку в консоли:

Uncaught ReferenceError: N is not defined
    at HTMLInputElement.onchange (Attendance.html:1)

attendanceUpdateFunction(this.id, this.value, N)

Переменная obj.attNewChum содержит значение N.

Я пытался поместить переменную в кавычки:

contents = contents + "<input type='text' id='" + obj.cdId + "' name='" + obj.cdId + "' value='" + attMeeting + "' onchange='attendanceUpdateFunction(this.id, this.value, "+"\"'obj.attNewChum'\""+")'>";

И это дает следующую ошибку в консоли:

Uncaught SyntaxError: Invalid or unexpected token

Answer 1

Используйте следующим образом

 contents = contents +'<input type="text" id="'+obj.cdId+'" name="'+obj.cdId+'" value="'+attMeeting+'" onchange="attendanceUpdateFunction(this.id, this.value, \''+obj.attNewChum+'\'")">';

Answer 2

Лучшей альтернативой было бы правильно подключить слушателя, используя Javascript, без использования встроенных обработчиков, чтобы вам не приходилось сталкиваться с какими-либо побегами:

const input = $("<input>")
  .prop({
    id: obj.cdId,
    name:  obj.cdId,
    value: attMeeting
  });
input.on('change', function() {
  attendanceUpdateFunction(this.id, this.value, obj.attNewChum);
});

Обратите внимание, что это приводит к тому, что input является объектом jQuery, а не строкой, поэтому вместо конкатенации нового HTML вы захотите .append новый элемент.

Если случайно вы просто используете id, чтобы попытаться передать obj.cdId в attendanceUpdateFunction, вы можете рассмотреть возможность полного удаления id и просто использовать простую ссылку на cdId:

const input = $("<input>")
  .prop({
    name:  obj.cdId,
    value: attMeeting
  });
input.on('change', () => {
  attendanceUpdateFunction(obj.cdId, input.val(), obj.attNewChum);
});