[英]How to get the ID of dynamically generated buttons
我自動生成了一些按鈕
<div class="wrapper" id="wrapper"></div>
<script type="application/javascript">
var x, i, y;
for(i = 0; i <= 10; i++){
y = i;
x = "<button class=btn_class"+y+"id=btn"+y+"onclick(alert(this.id);>Ukor</button>";
$("#wrapper").append(x);
}
$("button").on("click", function(){
alert(this.id);
});
</script>
我想在點擊任何按鈕時執行不同的操作。 但我似乎無法通過id獲取按鈕。 我還需要發送y作為函數的爭論
問題是你沒有空格分隔屬性。 所以你要創建一個看起來像這樣的元素:
<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button>
所以一切都進入了class
屬性。 您應該在屬性值周圍加上引號,並在屬性之間添加空格。
也不需要onclick
屬性,因為你使用$("button").on("click", ...)
來做到這一點。
所以它應該是:
x = "<button class='btn_class"+y+"' id='btn"+y+"'>Ukor</button>";
您還可以使用jQuery的面向對象的方式來創建元素:
x = $("<button>", {
"class": "btn_class" + y,
"id": "btn"+y,
text: "Ukor"
});
順便說一句,為什么你把y
放在課堂上? 通常,類的要點是讓所有相似的元素具有相同的類,因此您可以一次性解決所有這些問題。
看起來您正在構建HTML而沒有必要的空格或屬性之間的標點符號,因此您的按鈕HTML將如下所示:
<button class=btn_class0id=btn0onclick(alert(this.id);>Ukor</button>
這意味着沒有id
屬性。
嘗試修復它像這樣:
x = '<button class="btn_class' + y + '" id="btn' + y + '" onclick="alert(this.id);">Ukor</button>';
$("#wrapper").append(x);
...或者更好的是,使用jQuery API構建您的DOM:
x = $('<button onclick="alert(this.id);">Ukor</button>').attr({
id: 'btn' + y,
className: 'btn_class' + y
});
您的問題在於代碼將生成的字符串格式
<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button>
你需要:
<button class="btnclass0" id="btn0" onclick="alert(this.id);">Ukor</button>
var x, i, y; for (i = 0; i <= 10; i++) { y = i; x = "<button class='btn_class" + y + "' id='btn" + y + "'>Ukor</button>"; $("#wrapper").append(x); } $("button").on("click", function() { alert(this.id); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper" id="wrapper"></div>
將內容添加到單個字符串中,然后將其附加到dom中一次 - 比附加每次迭代更快。 然后使用指定的單擊事件處理程序 - 提醒按鈕的ID。 這些類需要是一個共同的價值 - 不像id那樣獨特。 此外 - 你根本不需要“y”,如果你需要將數字發送到你已經在id中的函數 - 只需獲取id的數字部分,你就可以根據需要使用它。
$(document).ready(function(){ var x=""; for(i = 0; i <= 10; i++){ x += "<button class='btn_class' id='btn"+i+"'>Ukor</button> "; } $("#wrapper").append(x); $(document).on('click','.btn_class', function(){ (alert($(this).attr('id'))) }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper" id="wrapper"></div>
我建議使用String模板來避免串聯時attrs之間的間距錯誤 - >更好地了解String中變量的可見性:
$(Array.from({length:11},(v,k)=>k) .map((i)=>`<button class="btn_class${i}" id="btn${i}" onclick="alert(this.id)">Ukor${i}</button>`) .join('')).appendTo('#wrapper')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper" id="wrapper"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.