附加按钮仅适用于附加到的第一个 div

Question

I'm trying to get each button that is appened to ('avatar-container comment ng-scope'), to be fully functional. Currently, only the top button is the button that is functional, and I'm not sure exactly why. Here's my code :

Also, I've already tried using addEventListener, but I was still running into the same problem :(.

$(document).ready(function () {
var groupcomments = $('.group-comments') // Container "Group Comments" are in
$(groupcomments).ready(function () {
    function ucall(user) {
        window.open('derp.com/userid=' + user, 'popup', 'width=600', 'height=600')
    };
    if (groupcomments[0]) {
        var comments = groupcomments[0].getElementsByClassName('avatar-container comment ng-scope') // This gathers all of the comments themselves
        $.each(comments, function () { // (you know this) but, this is looping over each comment.
            var user = $(this).find('a')[0].href.toString(); 
            user = user.replace(/[^\d]/g, '')
            $(this).append('<button id=btnn>Click</button>') // using $(this) (which i assume are the comments, it appends the button to the comment)
            var btn = document.getElementById('btnn') // getting the button
            $(btn).click(function () {
                ucall(user) // when button is clicked, call ucall function. 
            })
        })
    }
})

})

I commented in everything that should be useful, the button being appended worked, but it being clicked does not. Only on the first one appended. I'm just stuck right here.

Answer 1

You are adding a button <button id=btnn">Click</button> inside a loop. This means that you are adding several buttons all with the same ID. So, when you call document.getElementById('btnn') , you are only getting the first match in the list of buttons with the same ID.

You are only allowed to have one element with an ID. IDs are unique.