title: OnClick listener to list items
body: <p>I'm creating a multiple choice quiz and I'm having a difficult time with implementing an onClick listener. </p>
  
  <p>I've tried to use jQuery to create an alert when a button is choice but that seems not to be working.</p>
  
  <p>Could someone take a look at why it's not being triggered? Also, how can I pass in the content of the list item?</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="central-area" id="central-area"&gt;
      &lt;div class="main multiple-choice"&gt;
        &lt;div class="question-row row column"&gt;
          &lt;div id="questionText" class="question-text"&gt;to be&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="hint row column"&gt; &lt;span class="hint-text"&gt;Select the correct &lt;strong&gt;French&lt;/strong&gt; for the &lt;strong&gt;English&lt;/strong&gt; above:&lt;/span&gt; &lt;/div&gt;
        &lt;ol id="choices" class="choices "&gt;
          &lt;li class="choice " id="0"&gt;&lt;span class="val"&gt;prêter&lt;/span&gt;&lt;span class="marking-icon "&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li class="choice " id="1"&gt;&lt;span class="val"&gt;vêtir&lt;/span&gt;&lt;span class="marking-icon "&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li class="choice " id="2"&gt;&lt;span class="val"&gt;être&lt;/span&gt;&lt;span class="marking-icon "&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;li class="choice " id="3"&gt;&lt;span class="val"&gt;tirer&lt;/span&gt;&lt;span class="marking-icon "&gt;&lt;/span&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function guess(choice) {
    if (choice === "être") {
      alert("Correct");
      //Add correct class to chosen button
    } else {
      alert("Incorrect");
      //Add incorrect class to chosen button
      //Time delay, then add correct class to correct button
    }
  }
  
  $( "li" ).click(function() {
    alert( "Handler for .click() called." );
    // guess(choice);
  });
  </code></pre>
  
  <p>Here's a duplicate of the current situation: <a href="https://jsfiddle.net/a5j4zncv/16/" rel="nofollow noreferrer">https://jsfiddle.net/a5j4zncv/16/</a></p>