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

尝试以这种方式进行操作：

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

Answer 2

您需要考虑何时使用'和"-在代码中，用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 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>

话虽这么说， far 的最佳实践是完全避免使用过时的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时使用相同的#numOfKids值，则可以使用此逻辑轻松地得到重复的add_row()属性。应该避免这种情况，因此建议您更改逻辑，以免完全创建这些id属性。

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

3 个答案: