Question

实际上我想从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 onlick事件运行此代码

我的HTML代码是：

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

实际上我想在单击该按钮时显示弹出框，但不是从按钮ID。我想在从HTML的onclick事件中调用函数时显示popover。

Answer 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>

这是一个糟糕的主意，因为您必须自己设置fakePopover的顶部和左侧设置，同时让代码执行此操作。为了避免一些麻烦，您可能希望将元素放在div中（如我在示例中所示）position:absolute。

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

如何从HTML的onclick属性调用jQuery自定义函数？

1 个答案: