Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何获取动态生成按钮的ID_Javascript_Jquery - Fatal编程技术网

Javascript 如何获取动态生成按钮的ID

Javascript 如何获取动态生成按钮的ID,javascript,jquery,Javascript,Jquery,我自动生成了一些按钮 <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(thi

我自动生成了一些按钮

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

变量x,i,y;

对于(i=0;i而言,问题在于没有分隔属性的空格。因此,您正在创建一个如下所示的元素:

<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button>
您还可以使用jQuery的面向对象方法来创建元素:

x = $("<button>", {
        "class": "btn_class" + y,
        "id": "btn"+y,
        text: "Ukor"
});
x=$(“”{
“等级”:“btn_等级”+y,
“id”:“btn”+y,
案文:“Ukor”
});

顺便说一句,为什么要将
y
放在类中?类的要点通常是让所有相似的元素都具有相同的类,这样您就可以一次对它们进行处理。

看起来您在构建HTML时,属性之间没有必要的空格或标点符号,因此按钮HTML将如下所示:

<button class=btn_class0id=btn0onclick(alert(this.id);>Ukor</button>
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
});
x=$('Ukor').attr({
id:'btn'+y,
类名:“btn_类”+y
});

您的问题在于代码将生成的字符串格式

<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button>
Ukor
你需要:

<button class="btnclass0" id="btn0" onclick="alert(this.id);">Ukor</button>
Ukor
var x,i,y;

对于(i=0;i将内容添加到单个字符串中,然后将其追加到dom中一次-比追加每次迭代都要快。然后使用指定的单击事件处理程序-提醒按钮的id。并且类需要是公共值-而不是唯一的id。此外-您不需要“y”如果你需要将数字发送到一个函数,你的id中已经有了这个数字——只需获取id的数字部分,你就可以根据需要使用它

$(文档).ready(函数(){
var x=“”;
对于(i=0;i我建议使用,以避免串联时属性之间的间距错误->字符串中变量的可见性更好:


$(数组.from({length:11},(v,k)=>k)
.map((i)=>`Ukor${i}`)
.join(“”)).appendTo(“#包装器”)


属性周围需要空格,属性值周围也应该加引号。否则,这都是一个长属性。感谢您的回答,如何将“y”作为参数发送给函数?非常感谢您的回答,如何使用onclick()将“y”作为参数传递给函数?
<button class="btnclass0" id="btn0" onclick="alert(this.id);">Ukor</button>