javascript - 如何通过 PHP 填充 Bootstrap 弹出窗口

Question

我知道这个问题之前已经被问过，我已经阅读了答案，实现了它，但我面临一个小问题。

在 PHP 文件中，我尝试创建一个 anchor 标记，然后将其显示在弹出窗口中，但不是使其可单击，而是显示整个内容(以及 anchor 标记)。 此外，一旦单击该图标，即使单击它或页面上的其他任何位置，它也会保留下来并且不会消失。

这是代码:

HTML 文件:

<li style="margin-left: 15px;">

    <a href="#" data-placement="bottom" title="notifications" data-poload="notification_list.php" id="id-wala">
    <img src="assets/ring.png" width="25" height="25" data-toggle="tooltip" data-placement="bottom" title="notifications">

   </a>

  </li>

AJAX代码

$('*[data-poload]').click(function() {
            console.log('Hey');
        var e=$(this);
        e.off('click');
        e.unbind('click')
        $.get(e.data('poload'),function(d) {
            console.log(d);
            e.popover({content: d}).popover('show');
        });
    }); 

PHP 文件

    <?php
           #The code for connecting to the database removed for clarity.
           $sql1 = "SELECT PID from post where UID = '$a'";
           $result1 = mysqli_query($conn,$sql1);
           $end_result = '';
           while($row1 = mysqli_fetch_assoc($result1)) {
             $temp = $row1["PID"];
             $sql = "SELECT * from comment where status = 'unread' and PID = '$temp' ";
            $result = mysqli_query($conn, $sql);
            if (mysqli_num_rows($result) > 0) {
                  while($row = mysqli_fetch_assoc($result)) {
                      $end_result='<a href ="#" >'.'Notification from '.$row["UID"].'</a>';
                        echo $end_result;
                        echo '<br/>';
                    }
            }
        }
           $conn->close();
    ?>

问题是 echo $end_result 正在打印 <a href ="#" >Notification from 89</a>而不是来自 89 的通知并使其可点击。

请提供一些有关如何解决此问题的建议。

Answer 1

问题是因为默认情况下弹出窗口上的 html 属性为 false。这意味着您尝试放入弹出窗口内容中的任何 HTML 都将被删除。要更改此行为，您需要设置 html: true。

您还需要使用trigger: 'manual'并使用toggle选项在连续点击时隐藏/显示弹出窗口。试试这个:

e.popover({
    html: true,
    trigger: 'manual',
    content: d
}).popover('toggle');

Working example

Bootstrap Popover documentation