CODEWITHSUNDEEP
jqueryhtmldjangotwitter-bootstrap
Naomi See
Naomi See

Reputation: 101

Bootstrap Popover not responding to click event

I can see in the console that my data is populating within the popover but it's not responding to my click events at all and it's a bit maddening.

Here's a snibbet of the function containing the popover:

$(function(){
    $(".run-btn").click(populateSteps);
    $(".run-all-suite").click(getId);
    $(".run-all-btn").click(runAll);
    $('[data-toggle="popover"]').popover();
});

var table_draw = '<table class="table table-bordered"><tr><th>Title</th><th>Status</th><th>Holly</th><th>Call ID & TestRail ID</th><th>Failure reason</th></tr>';
                $.each(cases.cases, function (index, value) {
                    var popupControl = "<button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-content='" + value.script + "' data-original-title='' title=''></button>";
                    table_draw += "<tr><td class='title col-xs-2'>" + value.title + popupControl +"</td>" +
                    "<td class='status col-xs-1'><i class='fa fa-spin fa-spinner'></i><span> Running...</span></td>" +
                    "<td class='holly col-xs-1'>" + cases.holly + "</td>" +
                    "<td class='call-id col-xs-1'></td>" +
                    "<td class='reason col-xs-2'></td></tr>";

                    $('body').on('click', function (e) {
                        $('[data-toggle="popover"]').each(function () {

                            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                                $(this).popover('hide');
                            }
                        });
                    });
                });

Console output:

Order of my reference files:

<!-- Load Bootstrap JS source for popover -->
        <script src="{% static 'common/jquery/1.10.2/jquery.min.js' %}"></script>
        <script src="{% static 'common/tooltip/tether.min.js' %}"></script>
        <script src="{% static 'common/bootstrap/3.3.5/dist/js/bootstrap.min.js' %}"></script>

This is a Django project. The popover is in a JS file which is referenced on the page of which it displays which is dashboard.html:

<script>
{% include 'runner/dashboard.js' %}
</script>

The base.html file holds the above js references which is also referenced on the display page {% extends 'core/base.html' %}

I've created popovers before on another project but for whatever reason it will not show up for me and it's making me crazy. If you can help or if I need to provide something else to help you help me I will.

Upvotes: 1

Views: 638

Answers (1)

Alex H.
Alex H.

Reputation: 563

Given what you've shown us, odds are pretty good that the contents of table_draw haven't been rendered into HTML at the time that document.ready() fires. You'll need to register the event listener (your $('[data-toggle="popover"]').popover(); line) after it actually exists on the page.

Upvotes: 1

Related Questions