Диапазон ('A', 'Z') jQuery проблема

Question

У меня есть функция PHP, которая создает

с каждой буквой алфавита.

<?php foreach(range('A','Z') as $letter) : ?>
<li><input type="button" id="alpha-button" value="<?php echo $letter; ?>"></li>
<?php endforeach; ?>

Это создает список без проблем. Однако, когда я пытаюсь применить следующую функцию, она запускается только с первой сгенерированной кнопкой.

$(function(){
    $("#alpha-button").click(function(){
        alert($(this).val());
    });
})

Answer 1

Вы используете селектор идентификаторов, и идентификаторы должны быть уникальными внутри DOM.

Вы должны изменить его на class вместо id, например:

<?php foreach(range('A','Z') as $letter) : ?>
<li><input type="button" class="alpha-button" value="<?php echo $letter; ?>"></li>
<?php endforeach; ?>

И JS:

$(function(){
    $(".alpha-button").click(function(){
        alert($(this).val());
    });
})

Answer 2

Потому что у вас одинаковый идентификатор для каждого <li>.

Вы можете изменить его на

<?php foreach(range('A','Z') as $letter) : ?>
<li><input type="button" class="alpha-button" value="<?php echo $letter; ?>"></li>
<?php endforeach; ?>

и

$(function(){
    $(".alpha-button").click(function(){
        alert($(this).val());
    });
})