Can't Seem To Make Separate Button Events

Question

So I cant get these buttons to work. I've tried so many different ways. So what I've got is multiple "player" objects and they all have .div_tab buttons. And I need to be able to do things on that separate player when I click that players button. This code does nothing when I click the button.

Why? How to fix? thank you!

$(document).ready(function() {
  for (let i in players)
  {
    $(players[i].div_tab[0]).on('click', function() {
      console.log("Hello world!");
    });
  }
});

(edit)
I create the tabs with this code:

  this.addTab = function(name, id)
  {
    this.tabs.html(this.tabs.html() + "<div class='tab' id='"+id+"'>"+name+"</div>");
  }
  this.addTab("Select", "select");
  this.addTab("Customize", "customize");
  this.addTab("Audio Line", "audio-line");
  this.addTab("Audio Circle", "audio-circle");
  this.div_tab = this.tabs.find('div.tab');

Please add the relevant HTML. – Scott Marcus May 10 '18 at 17:39 — Scott Marcus, May 10 '18 at 17:39

Scott Marcus · Accepted Answer · 2018-05-10T17:47:08.417

0

There is no need for a loop at all. Just give the elements that need to get the callbacks a common CSS class and then you can set up the callback very simply:

$(function() {
  $(".commonHandler").on('click', function() {
    console.log("Hello world!");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="commonHandler">Click Me</button>
<button type="button">Click Me (but I won't do anything because I don't have the class)</button>                         <!-- <-- Not part of the group! -->
<input type="button" class="commonHandler" value="Click Me">
<span class="commonHandler">Click Me</span>

edited May 10 '18 at 17:47

answered May 10 '18 at 17:41

Scott Marcus

64,069
6
49
71

I need them to target their own player object, This is as you say a common handler. The console.log() will be replaced when I know it's working – Kevin Bäckstäde May 10 '18 at 17:47
@KevinBäckstäde That's what my answer can do for you. Just give each clickable element a common class and then gather them up and connect them to a common handler. – Scott Marcus May 10 '18 at 17:49
Wow took a while for me to realise how this would work... But I fixed it. Thanks! Sorry for my slow brain ;). – Kevin Bäckstäde May 10 '18 at 18:05

score -1 · Answer 2 · answered May 10 '18 at 17:47

-1

For the immediate problem, I am thinking you wanted:

    $(document).ready(function() {
      for (let i in players)
      {
        $(i.div_tab[0]).on('click', function() {
          console.log("Hello world!");
        });
      }
    });

since i is already going to be each of the instances in the list players... More generally, looking at the rest of the page this is in might help :-).

answered May 10 '18 at 17:47

moilejter

958
8
9

Hmm. Interesting I logged i and it said 0 but it gave no error replacing player[i]. Is this how it works? – Kevin Bäckstäde May 10 '18 at 17:51
I guess I would be curious to know what players has in it... But when you write that for loop, i is set to each of the values in the list, not their indices - so in your case i would be correct, players[i] ought not to work. If the list players is a list of numbers, then you couldn't use it to select any entity on the page. The suggestions below (like Scott's) may be a better direction to go in... – moilejter May 10 '18 at 18:03
I am pretty sure that it gives us the index of each node in the array. Just curious if it did both. let a = [123, 14291, 5125915, 15, 151519515, 15, 1251591, 9]; for (let i in a) { console.log(i); } gives: 0,1,2,3..... – Kevin Bäckstäde May 10 '18 at 18:18
`for-in` sets the variable to the indexes, not the values. You need to use `of` instead of `in` to get the values. – Barmar May 10 '18 at 18:56
More generally, [why using for-in with arrays is a bad idea](https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea?lq=1) – Barmar May 10 '18 at 18:58

Can't Seem To Make Separate Button Events

2 Answers2