Question

我试图在bootstrap pop-over中运行一个AJAX调用，但是我遇到了一些问题。

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();
});
});

我的问题是当点击按钮pl-op-fetch时，e.preventDefault()无效（以及我最小化的后续AJAX调用）。点击后，该按钮只会重定向到我的主页。我的页面上有其他元素成功使用AJAX调用，并阻止按钮在点击时执行默认操作，但在尝试将此操作转换为Bootstrap Pop-Over时遇到问题。

有人有什么想法吗？

Answer 1

当页面加载时，dom中不存在该元素，因此您需要使用“event delegation”

作为属性中的字符串，它不会被视为元素

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

JQuery在Popover中不能用于Bootstrap Button

1 个答案: