jquery создать HTML добавить событие JavaScript не работает

Question

Я создал html с помощью jquery и добавил команду события javascript в тег html. Неверная компиляция

ех.

var text = 'abc';
var id = 1;
html = "<tr onclick='test("+id +", '"+text +"');'></tr>";

Compile

<tr onclick="test(1, " abc');'=""></tr>

Как мне это исправить?

Answer 1

Вы можете использовать Шаблонные литералы следующим образом:

var text = 'abc';
var id = 1;
var html = `<tr onclick="test(${id},'${text}')"><td>Sample Data</td></tr>`;
document.querySelector('table tbody').insertAdjacentHTML('beforeend', html);

function test(elId, elText){
  console.log(elId + '::' + elText);
}

<table id="myTable">
  <tbody></tbody>
</table>

Answer 2

создать элемент и добавить событие, используя jquery

var text = 'abc';
var id = 1;

html = $('<tr><td>click Me!</td></tr>').click(function() {
  test(id, text);
})

$('table').append(html);

function test(id, txt) {
  console.log(id, txt);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table></table>

Answer 3

Похоже, ваша вторая одинарная кавычка закрывает значение onclick, замените одинарные кавычки вокруг текста на экранированные двойные кавычки. Попробуйте заменить эту строку

html = "<tr onclick='test("+id +", \""+text +"\");'></tr>";

Или, поскольку значения атрибутов в любом случае будут заканчиваться двойными кавычками,

html = '<tr onclick="test('+id +', \''+text +'\');"></tr>';