弹出内容加载后如何运行js函数-单击按钮后？
[英]How to run js function after popover content loads - after button click?
问题描述
I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function): 
我有来自W3学校网站的这种引导弹出窗口，并针对我的情况编辑了代码（请参见onPopoverHtmlLoad（）函数）：
<!DOCTYPE html> <!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h --> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Popover Example</h3> <a href="#" data-toggle="popover" data-html='true'title="Popover Header" data-content="Some content inside the popover <button id='inpopover_button'>false</button>">Toggle popover</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); //how to ensure to run this function on popoverHtmlDomLoad? function onPopoverHtmlLoad(){ document.getElementById("inpopover_button").innerHTML = "true" } </script> </body> </html>
Question is, how can I change HTML data content of popover after I hit popover button/trigger, please?
I appreciate solutions in Javascript, but accept JQuery help too. 我赞赏Javascript中的解决方案，但也接受JQuery帮助。 I was looking for similar issues but didn't find anything yet. 我一直在寻找类似的问题，但还没有找到任何东西。
2 个解决方案
解决方案1
4 已采纳 2019-03-17 21:38:22
You can replace onPopoverHtmlLoad with: 您可以将onPopoverHtmlLoad替换为：
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with: 并附加事件处理程序：
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe 参见密码笔： https ://codepen.io/anon/pen/MxXwQe
解决方案2
1 2019-03-17 21:45:34
read about bootstrap popover events here : https://getbootstrap.com/docs/4.0/components/popovers/#events 在此处阅读有关引导程序弹出事件的信息： https ://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html> <!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h --> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Popover Example</h3> <a href="#" data-toggle="popover" data-html='true'title="Popover Header" data-content="Some content inside the popover <button id='inpopover_button'>false</button>">Toggle popover</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover() .on('shown.bs.popover', onPopoverHtmlLoad); }); //how to ensure to run this function on popoverHtmlDomLoad? function onPopoverHtmlLoad(){ document.getElementById("inpopover_button").innerHTML = "true" } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.