Can we set attribute 'id' to different 'buttons' via loop using javascript or jquery?

Question

I want to achieve the following:

Let say I have ten buttons on my page, and they all are dynamically generated. I have added ID to all of these ten buttons, say id be 1,2,3....10. using the following code.

function createButton(id){
       button.setAttribute("name", id);
}

Now I want to add 'onlick' event to all these button, like this

function abc()
      $(document).on('click','#1', function(){
      callSomeFunc();
});

This way I'll have to write the above code 10 times with different Id's. I tried to use loop over the function as

function abc()
   for(var i=1, i<=10, i++){
          $(document).on('click',id, function(){
          callSomeFunc(id);
   });
}

to no avail ! How can I achieve this ?

Derek Story · Accepted Answer · 2016-05-01 16:00:38Z

2

There is no need to wrap your click event in a function. You can simply have it listening for a click event. And since each id is calling the same function, you can generalize it by a className rather than the specific ID:

 $(document).on('click', 'div', function() {
   callSomeFunc();
 });

Codepen Example

And to get the id value, you can use this.id:

 $(document).on('click', 'div', function() {
    callSomeFunc(this.id)
 });

ID Example

edited May 1, 2016 at 16:00

answered May 1, 2016 at 15:38

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

san A Over a year ago

I have edited my code. I forgot to pass ID as parameter to the last function call, so this way, that function call will be different for each button. Now what can I do ?

David Thomas Over a year ago

Please remember to not use a global variable, unless you have a very specific reason for it; initialise the variable using var or let, and instead of $(this).prop('id') just use this.id. This would give: var id = this.id, or without using a variable, simply: callSomeFunc( this.id ); I'm not planning to down-vote, this is just intended as constructive criticism, based on the initial 'ewww' reaction...

ChrisM · Accepted Answer · 2016-05-01 15:51:12Z

1

The immediate fix for your function, sticking to the way you are trying to do it, is to do the following:

function abc()
   for(var i=1, i<=10, i++){
          $(document).on('click','#' + i, function(){
          id = $(this).prop('id');
          callSomeFunc(id);
   });
}

Note I've added '#' explicitly and am referring to your index counter not 'id' in the intial selector.

I would recommend some refinements, however. You can always avoid the $(document) clunkiness:

function abc()
   for(var i=1, i<=10, i++){
          $('#' + i).click(function(){
          id = $(this).prop('id');
          callSomeFunc(id);
   });
}

Further is there a reason you are using ID's? If you set up a common class you could do this all in one fell swoop! Plus if you are using id to give different behaviour for different buttons, you could just do that within the event handler using $(this)

//This will apply the click handler to every element that has class="someClass"
$('.someClass').click(function(){
        //Do stuff with $($this)
});

edited May 1, 2016 at 15:51

answered May 1, 2016 at 15:45

ChrisM

1,73615 silver badges27 bronze badges

1 Comment

san A Over a year ago

Yes there is a reason for that and all the content is dynamicay generated so I cannot remove the $(document) thing otherwise events won't add to the IDs.

Collectives™ on Stack Overflow

Can we set attribute 'id' to different 'buttons' via loop using javascript or jquery?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related