[英]How do I add button dynamically with onclick value
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.我可以在单击按钮时添加选项卡内容和选项卡按钮,但生成的选项卡按钮没有
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);
}
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>
尝试这样做:
$button = '<button class="tablinks" onclick="openCity(event, \'' + $buttonNo + '\')" > Button '+$rowno+' </button>';
You need to think about when you use '
and "
- in your code you close the onclick='
before $buttonNo
with a '
.您需要考虑何时使用
'
和"
- 在您的代码中,您在$buttonNo
之前用'
关闭onclick='
'
。
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.很明显,您在某种程度上对此有所了解,因为您有
$button = "
然后在"
使用'
,但是因为您以"
开头,所以必须使用'
来表示里面的引号。
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.这是等效的。
The issue is due to your mismatched quotes around the onclick
value:问题是由于您在
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>
That being said, it's far better practice to avoid using the outdated on*
event attributes at all.话虽这么说,这是更好的做法是避免使用过时
on*
在所有的事件属性。 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:由于您已经在页面中包含了 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>
You could potentially do the same with the add_row()
function, but that depends on when it's being called.您可以对
add_row()
函数执行相同的add_row()
,但这取决于调用它的时间。
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.最后要注意的一件事是,如果在调用
add_row()
时使用相同的#numOfKids
值,您可以使用此逻辑轻松结束重复的id
属性。 This should be avoided, so I'd suggest changing your logic to avoid creating these id
attributes entirely.应该避免这种情况,因此我建议更改您的逻辑以避免完全创建这些
id
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.