title: submit form loaded on the bootstrap popover
body: <p>I have dynamically created rows, on each rows i have a add button when user click on the add button then dynamically created form will be loaded on the bootstrap propover.<br>
   <a href="http://jsfiddle.net/aSZ6q/" rel="nofollow noreferrer">FIDDLE DEMO</a></p>
  
  <p><strong>my problem is :</strong>  </p>
  
  <p>why  this code is NOT getting call? 
  Basically i am Submitting  this form From bootstrap popover ?</p>
  
  <pre><code> ...............
   ...............
  console.log($("#"+formidd));// NOTE: i have accurate form id
           $("#"+formidd).validate({
              rules: {
                  sproject_name: {
                      minlength: 3,
                      maxlength: 15,
                      required: true
                  }, tooltip_options: {
                      sproject_name: {placement: 'center', html: true, trigger: 'focus'}
                  }
              },
              submitHandler: function(form) { 
                  alert("form submit");
              }
          });
       ...............
       ...............
  </code></pre>
  
  <p>Any help will be highly appreciated.Please help me...</p>
  
  <hr>
  
  <p><strong>Form looks like this:</strong>(I want to validate It &amp; submit it when user press ENTER)
  <img src="https://i.stack.imgur.com/motns.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>My html data look like this:</strong></p>
  
  <pre><code>&lt;div id="project-div-id"&gt; 
          &lt;ul style="padding: 0px 0 2px;margin-left: 0px;"&gt;
           &lt;li&gt;&lt;span class="slilink"&gt; tour &lt;/span&gt;
              &lt;img class="del_btn" src="/images/icons/add.gif"&gt; 
                &lt;form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="160subproj" id="160subproj"  style="display:none;"&gt;
                    &lt;input type="text" value="1st"&gt;
                     &lt;input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" &gt;   
                &lt;/form&gt;
           &lt;/li&gt;
  
           &lt;li&gt;&lt;span class="slilink"&gt; personal&lt;/span&gt;
              &lt;img class="del_btn" src="/images/icons/add.gif"&gt; 
                &lt;form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj"  style="display:none;"&gt;
                    &lt;input type="text" value="2st"&gt;
                     &lt;input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" &gt;   
                &lt;/form&gt;
           &lt;/li&gt;
  
      &lt;li&gt;&lt;span class="slilink"&gt; business&lt;/span&gt;
              &lt;img class="del_btn" src="/images/icons/add.gif"&gt; 
                &lt;form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="162subproj" id="162subproj"  style="display:none;"&gt;
                    &lt;input type="text" value="3rd form"&gt;
                     &lt;input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" &gt;   
                &lt;/form&gt;
           &lt;/li&gt;
       &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>This is my FULL jquery code:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
       $(document).ready(function() { var formidd='';
  
          $('.add_btn').popover({
              html: true,
               title: function () {
                   formidd=$(this).parent().find('.projform_id').html();
                  return $(this).parent().find('.sub_proj_head').html(); 
              }, 
              content: function() { 
                  return $(this).parent().find('.sub_proj_content').html();
              }
  
          });
  
          $('.add_btn').click(function(e) { 
  
               console.log($("#"+formidd));//i have loaded form id
           $("#"+formidd).validate({
              rules: {
                  sproject_name: {
                      minlength: 3,
                      maxlength: 15,
                      required: true
                  }, tooltip_options: {
                      sproject_name: {placement: 'center', html: true, trigger: 'focus'}
                  }
              },
              submitHandler: function(form) { 
                  alert("form submit");
              }
          });
  
  
  
              $('.add_btn').not(this).popover('hide');
              e.stopPropagation();
          });
  
          $(document).click(function(e) {
              if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
                  $('.add_btn').popover('hide');
              }  
          });
  
  
      });
  &lt;/script&gt;
  </code></pre>