How do I add button dynamically with onclick value

Question

I want to add tabs dynamically when I click on a button. I can add the tab content and the tab button when I clicked the button but the resulting tab button doesn't have the onclick attribute.

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);
}

the above function does add the button but it gives

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

instead of

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

Answer 1

尝试这样做：

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

Answer 2

You need to think about when you use ' and " - in your code you close the onclick=' before $buttonNo with a ' .

It's clear you have an understanding of this to an extent as you have $button = " then use ' within that " , but because you start with " you have to use ' for the quotes inside.

You have two choices, either escape the ' or " or add it using the other.

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

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

Neither will give you:

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

but instead:

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

which is the equivalent.

Answer 3

The issue is due to your mismatched quotes around the onclick value:

'<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>

That being said, it's far better practice to avoid using the outdated on* event attributes at all. As you've already included jQuery in the page you can simplify this by using a delegated event handler instead and storing any meta data in a data attribute:

 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>

You could potentially do the same with the add_row() function, but that depends on when it's being called.

One final thing to note is that you can easily end up with duplicate id attributes using this logic, if the same value of #numOfKids is used when add_row() is called. This should be avoided, so I'd suggest changing your logic to avoid creating these id attributes entirely.