title: Assigning JQuery On Click Function in For Loop
body: <p>I have a function that dynamically creates div elements based upon whatever input is given, and lets them choose certain items by clicking on each div. I have it so that if the div is clicked, a function (named <code>checkToggle</code>) is called that makes it looks like it is selected and adjusts some related variables. There is a checkbox in the div element that is toggled by this function (hence its name). Long story short, I had to jump through some hoops to get it to work, most of which I don't even remember. Please don't ask me about that.</p>
  
  <p>The point of this question is this. I initially used the following JavaScript code to run the function when the checkbox was clicked. It was assigned by the main function, which created these div elements using a for loop.</p>
  
  <pre><code>document.getElementById(`${itemID}-checkbox`).onclick = function() {
      checkToggle(`${itemID}-checkbox`);
  };
  </code></pre>
  
  <p>This works, but I wanted to try to convert all of my onClick functions to JQuery. Here is the JQuery alternative I created.</p>
  
  <pre><code>$(`${itemID}-checkbox`).on(`click`, function() {
      checkToggle(`${itemID}-checkbox`);
  });
  </code></pre>
  
  <p>While the code itself seems to be fine, it does not work. It seems as if JQuery functions cannot be created like this in a for loop or something. It is applied after the element is created and put in its place, so I don't think it has anything to do with the element not being ready. I am also having the same issue with 2 other similar cases. Any idea as of why this isn't working?</p>
  
  <p>Let me know if more information is needed and if so, what kind of information is needed.</p>