如何为每个自动生成的按钮分配不同的ID？

Question

I use Facebook API to get all groups from user and then another function with FQL to make a different div for each group, and assign to each div a button, which links to another page, something like:

$('.groupButton').click(function() {  
  window.location ='anotherpage.html?groupid=' + groupid;
});

But on every button it assigns the last button's groupid. I don't know where's the mistake.

The 2 functions:

        function getGroupsIds(){
            document.getElementById('content_text').innerHTML = "";
            FB.api('/me/groups',function(resp){
                for (var i=0, l=resp.data.length; i<l; i++){ 
                getGroupInfo(resp.data[i].id);
                }
            });
        }


        function getGroupInfo(groupid){
            FB.api({
                method: 'fql.query',
                query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
            }, function(resp){
                var content_text = document.getElementById('content_text');
                var group = new Array(); 
                for (var i=0, l=resp.length; i<l; i++) 
                {


                    groupinput = document.createElement('button');
                    groupinput.className = "groupButton";            
                    groupinput.innerHTML = "Vizualise";

                    $('.groupButton').click(function() {  
                    window.location ='pages/appviz.html?groupid=' + groupid;
                    });


                    groupdiv.appendChild(groupinput);
                    content_text.appendChild(groupdiv);

                }
            });
    }

Answer 1

From where you get the groupid? It is not clear. You can assign the groupid in the button as id. Then get the value when you click the button.

$('.groupButton').click(function() {
groupid = this.id;
window.location ='anotherpage.html?groupid=' + groupid;
});

And the input will be like

<input type='button' id='1' value='Profile' class='groupButton' />

Hope this will help you.

Answer 2

好吧，我使用了javascript，并且有效。

 groupinput.onclick = function(){ window.location.replace('pages/appviz.html?groupid=' + groupid);};

Answer 3

You are reassigning the click handler repeatedly in the for loop. This is causing the all buttons with the groupButton class to navigate to the last groupid you processed in the loop.

for (var i=0, l=resp.length; i<l; i++) {
    // this gets reassigned resp.length times
    $('.groupButton').click(function() {
        window.location ='pages/appviz.html?groupid=' + groupid;
    }
}

What you probably want is

function getGroupInfo(groupid){
    FB.api({
        method: 'fql.query',
        query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
    },
    function(resp) {
        ...
        for() { ... }

        groupdiv.appendChild(groupinput);
        content_text.appendChild(groupdiv);

        // assign click handler after building the elements
        $('.groupButton').click(function() {
            window.location = 'pages/appviz.html?groupid=' + this.id;
        });
    }

The $('.groupButton') is the set of all elements with the groupButton class (see Class Selector ). So you need this.id to get the id of the instance of button you clicked.

Answer 4

Most probably just remove the following code from inside of loop

 $('.groupButton').click(function() {  
                window.location ='pages/appviz.html?groupid=' + groupid;
                });

And put it outside of the function function getGroupInfo(groupid) , because the click function is only to done the action. Try and let us know its worked or not.

function getGroupInfo(groupid){
            FB.api({
                method: 'fql.query',
                query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
            }, function(resp){
                var content_text = document.getElementById('content_text');
                var group = new Array(); 
                for (var i=0, l=resp.length; i<l; i++) 
                {


                    groupinput = document.createElement('button');
                    groupinput.className = "groupButton";            
                    groupinput.innerHTML = "Vizualise";
                    groupinput.id = "g"+groupid;

                    groupdiv.appendChild(groupinput);
                    content_text.appendChild(groupdiv);

                }
            });
    }

$('.groupButton').click(function() {  
groupid = this.id;
 window.location ='pages/appviz.html?groupid=' + groupid.substr(1);
});

Try this