bbruman bbruman - 1 month ago 13
Javascript Question

JQuery not functioning for Bootstrap Button within Popover

I'm trying to run an AJAX call inside a bootstrap pop-over and am having some issues.

PHP:

$my-data-content = '<div><form>
<select class="form-control">
<option value="Enable">Enable</option>
<option value="Disable">Disable</option>
</select><button id="pl-op-fetch" type="submit" class="btn btn-info">
Save Changes</button></form></div>';


HTML:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover"
data-content='<?php echo $my-data-content; ?>' data-html="true">




Javascript:

jQuery(document).ready(function($){
$('#pl-op-fetch').click(function(e){
e.preventDefault();
});
});


My issue as then when the button
pl-op-fetch
is clicked,
e.preventDefault()
is not working (and the subsequent AJAX call that I minimized out).
On click, the button just redirects to my homepage.
I have other elements on my page that successfully uses the AJAX call and prevents the button from doing it's default action on click, but am running into issues when trying to manuever this into a Bootstrap Pop-Over.

Anyone have any ideas?

Answer

That element doesn't exist in the dom when the page loads so you need to use "event delegation"

As a string in an attribute it won't be found as an element

$(document).on('click', '#pl-op-fetch',function(e){ 
    e.preventDefault();
});
Comments