Triggering a click event within a Bootstrap popover

Question

Triggering a click event within a Bootstrap popover

Clicking the inbox button triggers the inbox_open() function. When this function runs, three buttons appear in the inbox header but there is no onclick event listener attached to them. Make sure to review the code after the // inbox.open comment for critical lines:

b.onclick = function() { console.log("button was clicked"); }

and

inbox.setAttribute("title", poH.innerHTML);

// inbox
var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");

var poH = document.createElement("span");
var poC = document.createElement("span");

var new_from_to = [0, 2, 3];
var number_of_news = [2, 1, 2];
var news_price_data = [10, 20, 30, 40, 50];

// inbox.open
function inbox_open() {
  for (var i = 0; i < number_of_news.length; i++) {
    var b = document.createElement("button");
    b.innerHTML = (i + 1);
    b.className = "poH";
    b.onclick = function() {
      console.log("button clicked");
    }
    poH.appendChild(b);
  }
  inbox.setAttribute("title", poH.innerHTML);
}

// inbox.addEventListener
inbox.onclick = inbox_open();

// Allow BS 4 popover to run
$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- HTML -->
<button id="inbox" class="btn btn-primary btn-sm" style="float: right; margin: 30px 30px 0 0;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox <span id="inbox_news"></span></button>

javascript jquery css html bootstrap-4

Answer 1

Answer №1

The issue at hand lies in the fact that the onclick function is not being properly bound to the buttons due to the unique behavior of Bootstrap's Popovers. To remedy this, you can include the following snippet of code to ensure that the onclick listener is added when the buttons are displayed:

$('#inbox').on('shown.bs.popover', function () {

    var btns = document.getElementsByClassName("poH");
    for (var i=0; i < btns.length; i++) {
        btns[i].onclick = function() { console.log("action"); };
    }

});

To implement this solution, simply insert the above code following your $(document).ready(...) declaration.

Answer 2

The issue at hand lies in the fact that the onclick function is not being properly bound to the buttons due to the unique behavior of Bootstrap's Popovers. To remedy this, you can include the following snippet of code to ensure that the onclick listener is added when the buttons are displayed:

$('#inbox').on('shown.bs.popover', function () {

    var btns = document.getElementsByClassName("poH");
    for (var i=0; i < btns.length; i++) {
        btns[i].onclick = function() { console.log("action"); };
    }

});

To implement this solution, simply insert the above code following your $(document).ready(...) declaration.

Answer 3

Answer №2

Preventing the onclick event on popover content is a common issue when using Bootstrap with any element. Attempting to bind an onclick event after the 'shown.bs.popover' event can result in the click behavior being prevented. The following code provides a solution to allow the popover content's onclick event to fire:

var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");

var poH = document.createElement("span");
var poC = document.createElement("span");

var new_from_to = [0, 2, 3];
var number_of_news = [2, 1, 2];
var news_price_data = [10, 20, 30, 40, 50];

// inbox.open
function inbox_open() {
  for (var i = 0; i < number_of_news.length; i++) {
    var b = document.createElement("button");
    b.innerHTML = (i + 1);
    b.className = "poH";
    b.click = function() {
      console.log("button clicked");
    }
    poH.appendChild(b);
  }
  inbox.setAttribute("title", poH.innerHTML);
}

// inbox.addEventListener
inbox.onclick = inbox_open();

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
  
  $('#inbox').on('shown.bs.popover', function () {
    for (var i=0; i < $('.poH').length; i++) {
        $('.poH')[i].onclick = function() { alert($(this).text()); };
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- HTML -->
<button id="inbox" class="btn btn-primary btn-sm" style="float: right; margin: 30px 30px 0 0;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox <span id="inbox_news"></span></button>

Answer 4

Preventing the onclick event on popover content is a common issue when using Bootstrap with any element. Attempting to bind an onclick event after the 'shown.bs.popover' event can result in the click behavior being prevented. The following code provides a solution to allow the popover content's onclick event to fire:

var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");

var poH = document.createElement("span");
var poC = document.createElement("span");

var new_from_to = [0, 2, 3];
var number_of_news = [2, 1, 2];
var news_price_data = [10, 20, 30, 40, 50];

// inbox.open
function inbox_open() {
  for (var i = 0; i < number_of_news.length; i++) {
    var b = document.createElement("button");
    b.innerHTML = (i + 1);
    b.className = "poH";
    b.click = function() {
      console.log("button clicked");
    }
    poH.appendChild(b);
  }
  inbox.setAttribute("title", poH.innerHTML);
}

// inbox.addEventListener
inbox.onclick = inbox_open();

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
  
  $('#inbox').on('shown.bs.popover', function () {
    for (var i=0; i < $('.poH').length; i++) {
        $('.poH')[i].onclick = function() { alert($(this).text()); };
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- HTML -->
<button id="inbox" class="btn btn-primary btn-sm" style="float: right; margin: 30px 30px 0 0;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox <span id="inbox_news"></span></button>

Triggering a click event within a Bootstrap popover

Answer №1

Answer №2

Similar questions

Create a function that is determined by a specific hyperlink

Is it possible to customize the close icons on the autocomplete feature in Material UI?

Editing the dimensions of the input in Bootstrap 4

Creating a custom design for a button using an external CSS file

When the div is loaded, automatically navigate to the crucial li element within it, such as the one with the class "import

Flask is having trouble loading images within the static directory

When a user clicks on an image, I would like to dynamically resize it using a combination of PHP

Prevent double tap selection

The <img> tag needs to dynamically adjust its size based on the width of its parent element, while ensuring it does not exceed its original dimensions

The color of the progress bar shifts according to its value

Guide to selecting a date using JavaScript in Selenium with Ruby

Ensuring jQuery filter() works seamlessly with Internet Explorer versions 6, 7, and 8

Display PHP array information in an HTML table

Building a sleek and responsive navigation bar using HTML, CSS, and Bootstrap is

Tips for sending a variable from Javascript to node.js, specifically connecting to MYSQL

HTML makes column text wrapping automatic

Attempting to verify JavaScript input by utilizing OnClick and a custom function. Regardless of the content inputted, the system consistently confirms that the format is accurate

Repairing the formatting of the content inside a dynamically growing div

The red error text below the input becomes less visible when the input is focused on Windows, creating

Error encountered with the OffsetWidth in the Jq.carousel program