Javascript popover在$中不工作（数据、函数（键、值）_Javascript_Html

Javascript popover在$中不工作（数据、函数（键、值）

javascript html

Javascript popover在$中不工作（数据、函数（键、值）,javascript,html,Javascript,Html,在$tbody.append的if循环中，我试图在inc_id参数上添加popover。尽管我调用了popover；In ready函数，但它不起作用。超链接被添加到inc_id参数中，但当我单击超链接时，它不会显示我在标记中添加的popover内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

在$tbody.append的if循环中，我试图在inc_id参数上添加popover。尽管我调用了popover；In ready函数，但它不起作用。超链接被添加到inc_id参数中，但当我单击超链接时，它不会显示我在标记中添加的popover内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td, th {
    border: 1px solid #000000;
    padding: 8px;
}
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
{
    $('[data-toggle="popover"]').popover();
    setInterval(function() {
        $.ajax({
            method: "GET",
            url: "/api/incidents/",
            success: function(data) {
                $("tbody").empty();
                $.each(data, function (key, value) {
                    var inc_Key = key;
                    var inc_id = value.id;
                    var inc_priority = value.priority;
                    var inc_status = value.status;
                    var inc_summary = value.summary;
                    var inc_group = value.group;
                    var inc_createdate = value.createdate
                    if(inc_Key==0){
                    $("tbody").append(
                       "<tr style='background-color:orange;color:white' ><td rowspan = 2><a href='#' data-toggle='popover' title='Popover Header' data-content='Some content inside the popover'>" + inc_id + "</a></td><td>" + inc_priority + "</td><td>" + inc_status + "</td><td>" + inc_group + "</td><td>" + inc_createdate + "</td></tr><tr style='background-color:orange;color:white'><td colspan = 4>" + inc_summary + "</td></tr>"
                    )}
                    else{
                    $("tbody").append(
                       "<tr><td rowspan = 2><a href='#' data-toggle='popover' title='Popover Header' data-content='Some content inside the popover'>" + inc_id + "</a></td><td>" + inc_priority + "</td><td>" + inc_status + "</td><td>" + inc_group + "</td><td>" + inc_createdate + "</td></tr><tr><td colspan = 4>" + inc_summary + "</td></tr>"
                    )
                    }
                })
            },
            error: function(data) {
                console.log("error");
                console.log(data);
            }
        })
    }, 1000);
});
 </script>

</head>
<body>
<section class="pt100 pb100">
     <div class="container">
          <div class="vertical-align">
              <div class="col-md-12">
                  <table class="table table-condensed">
                       <thead style="background-color:steelblue;color:white">
                            <tr>
                                 <th>TICKET ID</th>
                                 <th>PRIORITY</th>
                                 <th>STATUS</th>
                                 <th>GROUP</th>
                                 <th>CREATE DATE</th>

                            </tr>
                       </thead>
                       <tbody>
                       </tbody>
                  </table>
              </div>
          </div>
      </div>
 </section>

</body>
</html>

请建议如何使popover工作。

您正在尝试在元素存在之前初始化这些元素上的插件。这将捕获当时可能存在的任何元素，但不会捕获您稍后添加的元素

在成功回调中将新元素添加到表中后，选择它们以初始化它们上的插件：

$('tbody').empty();
$.each(data, function (key, value) {
    // adding elements to the table as you already do
});
$('tbody [data-toggle="popover"]').popover();

从提供的HTML中，这一行：

$'[data toggle=popover]'

将永远不会工作，因为document.ready上没有$'[data toggle=popover]'元素，您随后将通过AJAX添加它

我建议您在AJAX完成后将上述行移动到，如下所示：

$("tbody").append(
   "<tr style='background-color:orange;color:white' ><td rowspan = 2><a href='#' data-toggle='popover' title='Popover Header' data-content='Some content inside the popover'>" + inc_id + "</a></td><td>" + inc_priority + "</td><td>" + inc_status + "</td><td>" + inc_group + "</td><td>" + inc_createdate + "</td></tr><tr style='background-color:orange;color:white'><td colspan = 4>" + inc_summary + "</td></tr>"
)}
else{
$("tbody").append(
   "<tr><td rowspan = 2><a href='#' data-toggle='popover' title='Popover Header' data-content='Some content inside the popover'>" + inc_id + "</a></td><td>" + inc_priority + "</td><td>" + inc_status + "</td><td>" + inc_group + "</td><td>" + inc_createdate + "</td></tr><tr><td colspan = 4>" + inc_summary + "</td></tr>"
)
}
$('[data-toggle="popover"]').popover();