Question: I have a bootstrap popover element with a form inside.

I do a `preventDefault()` when the form is submitted but it doesn't actually prevent the submit.

When I don't use the popover and a modal instead it works perfectly.

Here is my HTML:

```
<div class="hide" id="popover-content">
    <form action="api/check.php" class="checkform" id="requestacallform" method="get" name="requestacallform">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" id="domein" name="name" placeholder="domein" type="text">
            </div>
        </div><input class="btn btn-blue submit" type="submit" value="Aanmelden">
        <p class="response"></p>
    </form>
</div>

```

Here is my JavaScript file where I create the popup (main.js)

```
$('#popover').popover({
    html: true,
    content: function() {
        return $("#popover-content").html();
    }
});

```

And this is where I do my `preventDefault()` in an other JavaScript file

```
$(".checkform").submit(function(e) {
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
        // AJAX content here
    });
});

```

Why the `preventDefault()` isn't working?

Answer: 
Try it like this please:

```
$(document).on('submit', '.checkform', function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

```

It is possible that the popover isn't loaded on page load and is getting generated just when it is needed so you need the document selector.
Because whenever the popover is opened a new dom fragment is created on the fly you may take advantage on this to attach events or manipulate the html itself like you need.

From [bootstrap popover docs](http://getbootstrap.com/javascript/http://getbootstrap.com/javascript/#popovers) you need to listen for this event:

> 
> inserted.bs.popover: This event is fired after the show.bs.popover event when the popover template has been added to the DOM.
> 
> 
> 

So, my proposal is to avoid the event delegation and attach the event directly to the correct element:

```js
$(function () {
  // open the popover on click
  $('#popover').popover({
    html: true,
    content: function () {
      return $("#popover-content").html();
    }
  });

  // when the popover template has been added to the DOM
  // find the correct element and attach the event handler
  // because the popover template is removed on close
  // it's useless to remove the event with .off('submit')
  $('#popover').on('inserted.bs.popover', function(e){

    $(this).next('.popover').find('.checkform').on('submit', function(e){
      e.preventDefault();
      var request = $("#domein").val();

      // do your stuff

      $('#popover').trigger('click');
    });

  });
});
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
<button type="button" class="btn btn-default popover-content" role="button" id="popover">
    Click to open Popover
</button>
<div id="popover-content" class="hidden">
    <form action="z.html" id="requestacallform" method="GET" name="requestacallform" class="checkform">
        <div class="form-group">
            <div class="input-group">
                <input id="domein" type="text" class="form-control" placeholder="domein" name="name"/>
            </div>
        </div>
        <input type="submit" value="Aanmelden" class="btn btn-blue submit"/>

        <p class="response"></p>
    </form>
</div>
```