如何在单击列表中的li时加载外部窗口小部件?

时间:2013-06-20 15:36:40

标签: javascript jquery widget get-satisfaction

如果我有这样的列表项:

<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和/或widget消失或者在没有任何事件的情况下出现在奇怪的地方)等等。

这是我一直在玩的小提琴:

http://jsfiddle.net/nQhDG/

2 个答案:

答案 0 :(得分:1)

试试这个,你非常接近:

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>

http://jsfiddle.net/nQhDG/4/

答案 1 :(得分:0)

我会使用css并将显示设置为您想要加载的项目。然后你可以通过document.getElementById(需要显示的项目的id)来改变显示到块(或任何你想要的)来显示项目的onclick将显示项目.style.display ='block'