javascript - 如何保持 Bootstrap 弹出窗口以便用户可以单击其中的按钮

Question

我有一个分区。在其悬停时，我显示一个弹出窗口。我在弹出窗口中制作了两个按钮。问题是当我用鼠标按下按钮时，弹出窗口消失了。我动态制作div。我试过的是这样的:

$('.more').click(function() {
         opinionBox += '<div onmouseenter="test($(this))" class="opinion">hello</div>';
         $(this).append(opinionBox);
})

对于弹出框:

function test(box) {
   box.popover({title: 'Current Opinion',
                trigger: 'hover', 
                html: 'true', 
                content: '<div><button>Press Me</button></div>', 
                placement: 'left'
              }).popover('show');
}

Answer 1

你已经使用了'悬停'事件，所以当你的鼠标离开 div 弹出窗口将被删除。如果“点击”对您有用，那么您可以将触发事件用作“点击”。鼠标移开后，这不会删除 div。

box.popover({title: 'Current Opinion',
            trigger: 'click',            // Changed event from hover to click
            html: 'true', 
            content: '<div><button>Press Me</button></div>', 
            placement: 'left'
          }).popover('show');