Получение идентификатора динамического элемента нажал - PullRequest
Новая
       2

Получение идентификатора динамического элемента нажал

0 голосов
/ 23 октября 2019

У меня есть цикл for, который создает несколько динамических элементов: 

// unknown length of $data['x']
<?php foreach($data['x'] as $x): ?>
    <button id="button_id<?php echo $x['id'] ?>" type="button" name="button">button</button>
<?php endforeach; ?>

, что приводит к: 

<button type="button" id="button_id2" name="button">button</button>
<button type="button" id="button_id4" name="button">button</button>
<button type="button" id="button_id9" name="button">button</button>

Я хочу получить идентификатор, нажав кнопку элемента. Мне удалось сделать это с помощью добавления onclick в html, но так как это плохая практика, как ловить элемент с помощью eventlistener?

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

удалите атрибут ID в целом, если задача состоит в том, чтобы определить, какая кнопка была нажата, поскольку есть более эффективные способы, чем полагаться на идентификатор. Далее используется querySelectorAll для идентификации всех соответствующих узлов, которым легко назначить прослушиватель событий 

<?php

    for( $i=1; $i <= 10; $i++ )echo "<button data-id='$i' name='bttn$i'>Button $i</button>";

?>
<script>
    let col=document.querySelectorAll('button');
        col.forEach( bttn=>{
            bttn.addEventListener('click',function(e){
                alert( this.dataset.id )
            })
        })
</script>
0 голосов
/ 23 октября 2019

попробуйте 

var allButton = document.getElementsByTagName("button");

var clickFunction = function() {
    console.log(this.getAttribute("id"));
};

for (var i = 0; i < allButton.length; i++) {
    allButton[i].addEventListener('click', clickFunction, false);
}
<button type="button" id="button_id2" name="button">button</button>
<button type="button" id="button_id4" name="button">button</button>
<button type="button" id="button_id9" name="button">button</button>
...