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: 
You're trying to append event handler for `.checkform` before adding it to DOM. You need to load second javascript file after loading contents html or append event globaly:

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

```

You can read more about events binding on dynamic htmls [here](https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements)
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.