javascript - JQuery 不适用于 Popover 中的 Bootstrap 按钮

Question

我正在尝试在 Bootstrap 弹出窗口内运行 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 中不存在该元素，因此您需要使用“事件委托(delegate)”

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

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