title: jQuery/Javascript not working on dynamic web pages
body: <p>I have a script that works completely fine on static web page, but I cannot get it to work on dynamic web pages. I tried different techniques from the research I've done, but I still cannot get it to work, so I'm looking for help. </p>
  
  <p>My script:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://mywebsite.com/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
          $(document).on('submit', '#bv-form', function() {
  
              var data = $(this).serialize();
  
              $.ajax({
  
              type: 'POST',
              url: 'notify.php',
              data: data,
              success: function(data) {
                  $("#bv-form").fadeOut(500).hide(function() {
                      $(".form-result").fadeIn(500).show(function() {
                          $(".form-result").html(data);
                      });
                  });
  
              }
          });
          return false;
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Form: </p>
  
  <pre><code>&lt;form method="post" id="bv-form"&gt;
      &lt;div class="checkbox form-feedback margin-five m_top_20"&gt;
          &lt;!-- checkbox  --&gt;
          &lt;label&gt;&lt;input type="checkbox" name="video_title" id="publish" checked value="&lt;?php echo ucwords($row['video_title']); ?&gt;"&gt; &lt;em&gt;"&lt;?php echo ucwords($row['video_title']); ?&gt;"&lt;/em&gt; by &lt;b&gt;&lt;?php echo ucwords($row['artist_name']); ?&gt;&lt;/b&gt; is not working&lt;/label&gt;
          &lt;!-- end checkbox  --&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;!-- button  --&gt;
          &lt;button class="btn btn-black no-margin-bottom btn-small no-margin-top" id="submit" type="submit"&gt;Send&lt;/button&gt;
          &lt;!-- end button  --&gt;
          &lt;input type="hidden" id="id"&gt; 
          &lt;input type="hidden" id="video_id" name="video_id" value="&lt;?php echo ucwords($row['id']); ?&gt;"&gt; 
          &lt;input type="hidden" id="artist_name" name="artist_name" value="&lt;?php echo $row['video_title']; ?&gt;"&gt; 
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm using <code>.on()</code>, but is there something I'm missing?</p>
  
  <p><strong>NOTE:</strong> I know that the question has been asked before on this site. I've tried following certain steps in those solutions, but I still cannot get this script to work.</p>