title: jquery - Click event not working for dynamically created button
body: <p>My requirement is to create number of buttons equal to the json array count. I was successful in creating buttons dynamically in jquery. But the method in .ready function of jquery is not called for the click action. I have tried searching in SO. Found few solutions but nothing worked for me. I am very new to jquery. Please help...</p>
  
  <p>my code:
  jQuery:</p>
  
  <pre><code>$(document).ready(function()
  {
      currentQuestionNo = 0;
      var questionsArray;
      $.getJSON('http://localhost/Sample/JsonCreation.php', function(data)
      {   
          questionsArray = data;
          variable = 1;
              //CREATE QUESTION BUTTONS DYNAMICALLY ** NOT WORKING
          for (var question in questionsArray)
          {
              var button = $("&lt;input&gt;").attr("type", "button").attr("id", "questionButton").val(variable);
  
              $('body').append(button);
  
                          //Tried using .next here - but it dint work...
              //$('body').append('&lt;button id="questionButton"&gt;' + variable + '&lt;/button&gt;');
              variable++;
          }
          displayQuestionJS(questionsArray[currentQuestionNo], document);
      });
  
  
  
  
      $("button").click(function()
      {
  
          if ($(this).attr('id') == "nextQuestion")
          {
              currentQuestionNo = ++currentQuestionNo;
          }
          else if ($(this).attr('id') == "previousQuestion")
          {
              currentQuestionNo = --currentQuestionNo;
          }
  
          displayQuestionJS(questionsArray[currentQuestionNo], document);
  
      });
  
  
  
  function displayQuestionJS(currentQuestion, document) 
  {
      document.getElementById('questionNumber').innerText  = currentQuestion.questionNumber;
      document.getElementById('questionDescription').innerText  = currentQuestion.quesDesc;
      $('label[for=optionA]').html(currentQuestion.optionA);
      $('label[for=optionB]').html(currentQuestion.optionB);
      $('label[for=optionC]').html(currentQuestion.optionC);
  }
  
  HTML content
  &lt;form method="post" name="formRadio"&gt;
  
  &lt;label id="questionNumber"&gt;&lt;/label&gt;. &amp;nbsp;
  &lt;label id="questionDescription"&gt;&lt;/label&gt;   &lt;br /&gt;
  &lt;input type="radio" id="optionA"&gt; &lt;/input&gt; &lt;label for="optionA"&gt;&lt;/label&gt; &lt;br /&gt;
  &lt;input type="radio" id="optionB"&gt; &lt;/input&gt; &lt;label for="optionB"&gt;&lt;/label&gt; &lt;br /&gt;
  &lt;input type="radio" id="optionC"&gt; &lt;/input&gt; &lt;label for="optionC"&gt;&lt;/label&gt; &lt;br /&gt;
  
  &lt;button id="previousQuestion"&gt;Previous Question&lt;/button&gt;
  &lt;button id="nextQuestion"&gt;Next Question&lt;/button&gt;
  
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;input type="submit" id="submitButton" name="submitTest" value="Submit"&gt;&lt;/input&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>EDIT -- Sample .on Method code - Separate file: WORKING - THANKS A LOT</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function()
  {
      $("button").click(function()
      {
          var button = '&lt;input type="button" id="button2" value="dynamic button"&gt;';
          $('body').append(button);
      });
  });
  
  $(document).on('click','#button2', function()
  {
      alert("Dynamic button action");
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;button id="button"&gt;Static Button&lt;/button&gt;
  
  &lt;/body&gt;
  </code></pre>