2015-05-29 54 views
0

其实我想从HTML按钮标签中定义的onclick属性中调用一个函数,它是一个jQuery的弹出函数。我无法成功。如何从HTML的onclick属性调用jQuery自定义函数?

我的脚本是:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#popoverId').popover({ 
     html: true, 
     title: 'Popover Title <a class="close" href="#");">&times;</a>', 
     content: '<div class="msg">Your Text Here</div>', 
    }); 

    $('#popoverId').click(function (e) { 
     e.stopPropagation(); 
    }); 

    $(document).click(function (e) { 
     if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) { 
      $('#popoverId').popover('hide'); 
     } 
    }); 


    }); 

</script> 

我想通过HTML点击数事件来运行该代码

我的HTML代码:

<input type="submit" id="popoverId" class="btn btn-large btn-danger" onclick="myfunction()" /> 

其实我想要显示的酥料饼的时候我点击该按钮,但不是从按钮ID。我想在JavaScript的onclick事件中调用该函数时显示弹出窗口。

+0

你可以尝试手动触发。但也需要附加在选择器上。 –

回答

1

我将您的代码复制到小提琴中,并检查结果。这里我重新创建了这个效果。这是打开/关闭酥料饼的最佳方式,但也许会适合您的需求...

fakePopover = function() { 
 
    if (document.getElementById("popover474618")) { 
 
     document.getElementById("popover474618").parentNode.removeChild(document.getElementById("popover474618")); 
 
    } else { 
 
     document.getElementsByTagName("body")[0].innerHTML += "<div class=\"popover fade right in\" role=\"tooltip\" id=\"popover474618\" style=\"top: 100px; left: 160px; display: block;position:relative;\"><div class=\"arrow\" style=\"top: 31.0344827586207%;\"></div><h3 class=\"popover-title\">Popover Title <a class=\"close\" href=\"#\");\"=\"\">×</a></h3><div class=\"popover-content\"><div class=\"msg\">Your Text Here</div></div></div>"; 
 
    } 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" style="position:absolute; left: 100px; top:100px;background-color:gray;"> 
 
<input type="submit" id="popoverId" class="btn btn-large btn-danger" onclick="fakePopover()" /> 
 
</div>

这是一个坏主意,因为你有在代码已经完成的情况下自行设置虚拟便笺的顶部和左侧设置。为了避免一些麻烦,你可能想把元素放在一个div中(如我在示例中)与position:absolute

请注意,除非您单击用于打开弹出式窗口的相同按钮,否则此操作不会关闭。你需要一些额外的JavaScript(/ jQuery)来保留你以前的功能。

相关问题