title: After Ajax Refresh, Elements are not working properly
body: <p>After the Ajax refresh of div tag with new data,</p>
  
  <p>Here i try to get value of radio button [checked], by using the following code.</p>
  
  <p><strong>Before HTML :</strong></p>
  
  <pre><code>&lt;div id="summery"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery Block 1 :</strong></p>
  
  <pre><code>       $.ajax({
                  url: site_addr + '/new_row_rec',
                  type: 'POST',
                  success: function (res) {
                      /** If error is hit, then redirect */
                      if (res.error_url) {
                          location.reload(res.error_url);
                      }
                      $('#summery').html(res);
                  }
              });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;div id="summery"&gt;
        &lt;input type="radio" name="payment_type[]" class="payment_type"
                                                 value="A"&gt;
  
        &lt;input type="radio" name="payment_type[]" class="payment_type"
                                                 value="B"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery Block 2 :</strong></p>
  
  <pre><code>$('.payment_type').on('click', function () {
     var row = $('input[name="payment_type"]:checked').val();
     console.log('Row : ' + row)
   }
  </code></pre>
  
  <p>I get error as :</p>
  
  <pre><code> Row : undefined
  </code></pre>
  
  <p>Here, <strong>jQuery Block 1</strong> is executed first and html contents are loaded.
  After that, <strong>jQuery Block 2</strong> is run by on click event of radio button.</p>
  
  <p>I think there is an element binding issue, is it so. Then what's the solution for this ?</p>
  
  <p>or </p>
  
  <p>Any other ways to get the value of radio button after the refresh.</p>
  
  <p>Note : jQuery Event Trigger on Main Page to Newly Loaded Page.</p>