Как добавить кнопку динамически со значением onclick

Question

Я хочу динамически добавлять вкладки, когда нажимаю на кнопку.Я могу добавить содержимое вкладки и кнопку вкладки, когда нажимаю кнопку, но полученная кнопка вкладки не имеет атрибута onclick.

function add_row()
{
  $rowno=$("#numOfKids").val();
  $rowno=$rowno++;
  $buttonNo = "Button"+$rowno;
  $button = "<button class='tablinks' onclick='openCity(event, '"+$buttonNo+"')'>Button"+$rowno+"</button>";
  $("#divAnak").append("<div id='Anak"+$rowno+"' class='tabcontent'><h3>London</h3><p>London is the capital city of England.</p></div>");
  $("#tabs").append($button);
}

, указанная выше функция добавляет кнопку, но она дает

<button class="tablinks" onclick="openCity(event, " button1')'="">Button1</button>

вместо

<button class="tablinks" onclick="openCity(event, 'Button1')">Button1</button>

Answer 1

Вам нужно подумать, когда вы используете ' и " - в своем коде вы закрываете onclick=' до $buttonNo с помощью '.

Ясно, что вы в некоторой степени понимаете это, поскольку у вас есть $button = ", затем используйте ' в этом ", но поскольку вы начинаете с ", вы должны использовать ' длякавычки внутри.

У вас есть два варианта: либо экранировать ' или ", либо добавить его с помощью другого.

$button = "<button class='tablinks' onclick='openCity(event, \""+$buttonNo+"\")'>Button"+$rowno+"</button>";

$button = "<button class='tablinks' onclick='openCity(event, "+'"'+$buttonNo+'"'+")'>Button"+$rowno+"</button>";

Ни один из них не даст вам:

<button class="tablinks" onclick="openCity(event, 'Button1')">Button1</button>

но вместо этого:

<button class='tablinks' onclick='openCity(event, "Button1")'>Button1</button>

, что эквивалентно.

Answer 2

Проблема связана с вашими несоответствующими кавычками вокруг значения onclick:

'<button class="tablinks" onclick="openCity(event, \'' + buttonNo + '\')">Button' + rowNo + '</button>'

function add_row() {
  var rowNo = parseInt($("#numOfKids").val(), 10);
  rowNo = rowNo++;
  var buttonNo = "Button" + rowNo;
  console.log(buttonNo);
  var buttonHtml = '<button class="tablinks" onclick="openCity(event, \'' + buttonNo + '\')">Button' + rowNo + '</button>';
  $("#divAnak").append("<div id='Anak" + rowNo + "' class='tabcontent'><h3>London</h3><p>London is the capital city of England.</p></div>");
  $("#tabs").append(buttonHtml);
}

add_row();

function openCity(e, buttonNo) {
  console.log(buttonNo);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="numOfKids" value="1" />
<div id="tabs"></div>
<div id="divAnak"></div>

Как говорится, лучше использовать далеко , чтобы вообще не использовать устаревшие атрибуты on*.Поскольку вы уже включили jQuery на страницу, вы можете упростить это, используя вместо этого делегированный обработчик событий и сохраняя любые метаданные в атрибуте data:

function add_row() {
  var rowNo = parseInt($("#numOfKids").val(), 10);
  rowNo = rowNo++;
  var buttonNo = "Button" + rowNo;
  var buttonHtml = '<button class="tablinks" data-button-no="' + buttonNo + '">Button' + rowNo + '</button>';
  $("#divAnak").append("<div id='Anak" + rowNo + "' class='tabcontent'><h3>London</h3><p>London is the capital city of England.</p></div>");
  $("#tabs").append(buttonHtml);
}

add_row();

$('#tabs').on('click', '.tablinks', function(e) {
  console.log($(this).data('button-no'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="numOfKids" value="1" />
<div id="tabs"></div>
<div id="divAnak"></div>

Вы можете сделать то же самое с функцией add_row(), но это зависит от того, когда она вызывается.

И последнее, что нужно сделатьобратите внимание, что вы можете легко получить дубликаты атрибутов id, используя эту логику, если при вызове add_row() используется то же значение #numOfKids.Этого следует избегать, поэтому я бы предложил изменить вашу логику, чтобы полностью не создавать эти id атрибуты.

Answer 3

Попробуйте сделать это так:

$button = '<button class="tablinks" onclick="openCity(event, \'' + $buttonNo + '\')" > Button '+$rowno+' </button>';