How to call a jQuery custom function from the onclick attributes of HTML?

Question

Actually I want to call a function which is a pop over function of a jQuery, from the onclick attributes defined in HTML button tags. I can't succeed.

My script is:

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

I want to run this code through the HTML onlick event

My HTML code is:

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

Actually I want to display the popover when I click that button but not from the button id. I want to display the popover when the function is called from the onclick event of the HTML as JavaScript.

you can try manual trigger. but also need attach on selector. — Anik Islam Abhi
– Anik Islam Abhi, Commented May 29, 2015 at 4:53

sudo rm -rf slash · Accepted Answer · 2015-05-29 06:00:39Z

I copied your code into a fiddle and inspected the outcome. Here I have recreated the effect. This is not the best way to open/close a popover, but maybe it will suite your needs...

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>

This is a bad idea because you'll have to set the fakePopover's top and left settings yourself all while having the code to do just that already. To avoid some hassle, you may want to put the elements in a div (as I have in the example) with position:absolute.

Note that this doesn't close unless you click the same button you used to open the popover. You'll need some additional JavaScript(/jQuery) to retain the same functionality you had before.

Collectives™ on Stack Overflow

How to call a jQuery custom function from the onclick attributes of HTML?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related