title: Ajax inside a bootstrap popover
body: <p>I'm stuck with this problem, and I really don't know why it's not working.</p>
  
  <p>If I'm using this code out side of the bootstrap's popover it works, but as soon as I'm using it inside the popover it doesn't work anymore. I mean if the form is submit from the popover it acts like a normal form, charging the new page instead of acting like a AJAX script.</p>
  
  <pre><code>           $("#share-popover").submit(function(){
                //get the url for the form
                var url=$("#form_search").attr("action");
                alert($("#search-value").val());
  
                //start send the post request
                 $.post(url,{
                     formName:$("#search-value").val(),
                     other:"attributes"
                 },function(data){
                      if(data.responseCode==200 ){           
                          $('#output').html(data.greeting);
                          $('#output').css("color","red");
                      }
                     else if(data.responseCode==400){ //bad request
                         $('#output').html(data.greeting);
                         $('#output').css("color","red");
                     }
                     else{
                        alert("An unexpeded error occured.");
                     }
                 });
                return false;
             });
  </code></pre>
  
  <p>button :</p>
  
  <pre><code>   &lt;button id="share-dropdown" style="margin-right:5px" class="btn btn-warning pull-right" type="button" rel="popover" data-placement="bottom" data-html="true"&gt;&lt;i class="icon icon-plus icon-white"&gt;&lt;/i&gt; Share&lt;/button&gt;
  </code></pre>
  
  <p>Js : </p>
  
  <pre><code>        $('#share-dropdown').popover({ 
              html : true,
              content: function() {
                return $("#share-popover").html();
              }
          });
  </code></pre>
  
  <p>Html for the content : </p>
  
  <pre><code>&lt;div id="share-popover" style="display: none"&gt;
    &lt;form id="form_search" action="{{ path('weezbook_site_ajax_search') }}" method="POST"&gt;
      &lt;input id="search-value" type="text" value="Book title, authors, isbn" class="share-input" name="search-value" /&gt;
      &lt;input type="submit"  /&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>I'm using this with Symfony2 and my controller returns JSON.</p>
  
  <p>I really don't get why it's working outside of the box and not inside...</p>