如何使用 onclick 值动态添加按钮答案

【问题标题】：How do I add button dynamically with onclick value如何使用 onclick 值动态添加按钮
【发布时间】：2019-01-29 08:32:18
【问题描述】：

我想在单击按钮时动态添加选项卡。我可以在单击按钮时添加选项卡内容和选项卡按钮，但生成的选项卡按钮没有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>

【问题讨论】：

标签： javascript html jquery css button

【解决方案1】：

尝试这样做：

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

【讨论】：

@PhilipChristianto 乐于提供帮助 :-)

【解决方案2】：

您需要考虑何时使用' 和" - 在您的代码中，您使用' 在$buttonNo 之前关闭onclick='。

很明显，您在一定程度上对此有所了解，因为您有$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>

这是等价的。

【讨论】：

【解决方案3】：

问题是由于您在 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() 函数执行相同的操作，但这取决于它何时被调用。

最后要注意的一点是，如果在调用 add_row() 时使用了相同的 #numOfKids 值，则使用此逻辑很容易得到重复的 id 属性。应该避免这种情况，因此我建议您更改逻辑以避免完全创建这些 id 属性。

【讨论】：