Как получить идентификатор динамически генерируемые кнопки

Question

I авто genrated некоторых кнопок

<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 в качестве аргумента функции

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

... или еще лучше, использовать API JQuery для построения 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

Добавить содержимое в одну строку, а затем добавить его один раз в йот - быстрее, чем добавление каждой итерации. Затем с помощью назначенного обработчика события клика - предупредите идентификатор кнопки. И классы должны быть общей ценностью, а не уникальными, как идентификаторы. Кроме того, вам вообще не нужно «y», и если вам нужно отправить номер функции, которую у вас уже есть в 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 на конкатенации -> Лучше в видимости переменных в строки:

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