Question

我自动生成一些按钮

$videosResponse = $youtube->videos->listVideos('status, fileDetails, snippet, recordingDetails, topicDetails', array(
                        'id' => $id,
                        'maxResults' => 1,
                        'part' => 'status,snippet',
                        'safeSearch' => 'strict',
                      ));

我希望在点击任何按钮时执行不同的操作。但我似乎无法按ID获取按钮。我还需要发送y作为函数

的争论

Answer 1

问题是你没有空格分隔属性。所以你要创建一个看起来像这样的元素：

<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放在课堂上？通常，类的要点是让所有相似的元素具有相同的类，因此您可以一次性解决所有这些问题。

Answer 2

看起来您正在构建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
});

Answer 3

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

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

Answer 4

将内容添加到单个字符串中，然后将其附加到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>

Answer 5

我建议使用String template来避免连接时attrs之间的间距错误 - ＆gt;更好地了解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>

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

5 个答案: