title: Stopping jquery running after event is handled
body: <p>I have a radio button  which launch a jquery script on click.  On click I render a form where I want the user to enter a comment.  Evrything works fine,  event is detected and form is rendered  but when I click on the form field, it seems that it runs again my jquery script and I get the undefined variable.</p>
  
  <p>Here is my radio button  </p>
  
  <pre><code>&lt;div class="switch"&gt;
        &lt;input type="radio" class="switch-input" name="view&lt;?php echo $data['id'];?&gt;" 
        value="Yes" id="yes&lt;?php echo $data['id']; ?&gt;" 
        data-comment="&lt;?php echo $comment_state;?&gt;" data-val=1&gt;
        &lt;label for="yes"&gt;Yes&lt;/label&gt;
        &lt;input type="radio" class="switch-input" name="view&lt;?php echo $data['id'];?&gt;" 
        value="No" id="no&lt;?php echo $data['id']; ?&gt;" &lt;?php echo $neutral; ?&gt;
        data-opinion="&lt;?php echo $comment_state;?&gt;" data-val=0&gt;
        &lt;label for="no" &gt;No&lt;/label&gt;
        &lt;span class="switch-selection"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="form&lt;?php echo $data['id']; ?&gt;"&gt; &lt;/div&gt;    // where I render the form after click
  </code></pre>
  
  <p>here is the jquery script</p>
  
  <pre><code>$('[id^="yes"], [id^="no"])').click(function(e) {
  
  
              var comment = $(this).data('comment');   // comment= 0 because not selected
              var val = $(this).data('val');           // val = 1 if I click yes
              var parameter = $(this).attr('name');    // parameter = view + id number
              parameter = parameter.replace('view','');
  
              if (comment ==0){   // New record
                  $.ajax( 
                  {
  
                      url : 'post/comment',
                      type: "POST",
  
                      success:function(data, textStatus, jqXHR) 
                          {
                              $(".switch input:radio").attr('disabled',true);
                              $("#form"+ parameter).html(data);   
                          },
                      error: function(jqXHR, textStatus, errorThrown) 
                          {
                              alert("error");
                          }
                  });
              }
      });
  </code></pre>
  
  <p>Here is the form rendered </p>
  
  <pre><code>&lt;div class="row"&gt;
       &lt;label for="MyComment" class="required"&gt;Comment &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;       
       &lt;input size="60" maxlength="140" name="MyComment" id="Post_comment" type="text" /&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on the field form or elsewhere,  I got the error   TypeError: parameter is undefined
  (in the jquery script)</p>
  
  <p>Any idea ?</p>
  
  <p>Thank you in advance</p>