如果我有一个这样的列表项:
<li class="" id="view_ideas"><a href="#"><span>View ideas</span></a>
我希望它在单击时加载以下 Get Satisfaction Engage 小部件:
<div id="getsat-widget-6135"></div>
<script type="text/javascript" src="https://loader.engage.gsfn.us/loader.js"></script>
<script type="text/javascript">
if (typeof GSFN !== "undefined") { GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"}); }
</script>
我该怎么办?我尝试过使用这样的东西:
<script type ="text/javascript">
jQuery(function () {
jQuery('#view_ideas').click(function(){
var str = jQuery(this).text();
jQuery('#getsat-widget-6135').load('<div id="getsat-widget-6135"></div>
<script type="text/javascript" src="https://loader.engage.gsfn.us/loader.js"></script>
<script type="text/javascript">
if (typeof GSFN !== "undefined") { GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"});
}
</script>');
});
});
我尝试过这样的事情:
<script type="text/javascript">
var script = document.createElement('
if (typeof GSFN !== "undefined") { GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"});
jQuery("#getsat-widget-6135").append("#view_ideas"); }
</script>')
大多数情况下,单击 li 时不会发生任何事情。我也玩过 .innerHTML 和 .text,我尝试将 JavaScript 直接放入 li 或 span 中,并且尝试用脚本替换 href(这两者都会使 li 和/或小部件消失或者在没有任何事件的情况下出现在奇怪的位置)等。
这是我一直在演奏的 fiddle :
最佳答案
试试这个,你已经很接近了:
jQuery(function () {
jQuery('#view_ideas').click(function () {
if (typeof GSFN !== "undefined") {
$('#getsat-widget-6135').empty();
GSFN.loadWidget(6135,{"containerId":"getsat-widget-6135"}); }
});
});
和
<script type="text/javascript" src="https://loader.engage.gsfn.us/loader.js">
</script>
<ul id="nav1">
<li class="" id="view_ideas"><a href="#"><span>View ideas</span></a>
</li>
</ul>
<div id="getsat-widget-6135"></div>
关于javascript - 单击列表中的 li 后如何加载外部小部件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17217893/