Twitter Bootstrap 弹出框在 Wordpress 循环中不起作用

Question

我一直试图让引导弹出框在 Wordpress 循环中工作，但没有成功，这就是我到目前为止所做的：

<?php while($have_posts()): $the_post();
  $excerpt = strip_tags(get_the_excerpt());?>

  <a class="<?php echo the_ID()?>" href="<?php echo the_permalink();?>"><?php echo the_title();?></a>

  <script>
  jQuery('.<?php echo the_ID()?>').mouseenter(function(){
    jQuery(this).popover({
      html: true,
      title: '<?php echo the_title();?>',
      trigger: 'manual',
      placement:'top',
      content:'<?php echo $excerpt;?>'
    }).popover('show');
  });
  </script>
<?php endwhile;?>

这打印出我的期望

<a class="5598" href="http://mysite.oom/post/">Post Title</a>

<script>
jQuery('.5598').mouseenter(function(){
  jQuery('.5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

etc...

但是，悬停时弹出框没有显示，并且我没有收到任何脚本错误，所以我不知道为什么弹出框不起作用，我确实有 jQuery、bootstrap.js 和 bootstrap。 css 包含在页面加载中。任何帮助将不胜感激！

谢谢

Answer 1

以数字开头的类和 ID 不起作用！

众所周知，当您将班级作为数字进行时：

<div class="1234">...</div>

它不起作用。在你的情况下，它是这样的：

<script>
jQuery('.5598').mouseenter(function(){
  jQuery('.5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

类是一个纯数字。 5598。不工作。所以尝试用类似的东西替换它：

<a class="p5598" href="http://mysite.oom/post/">Post Title</a>

<script>
jQuery('.p5598').mouseenter(function(){
  jQuery('.p5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

---

我怀疑的另一件事是，.popover() 是一个函数，可以像实例化一样使用。所以，不要在.mouseenter() 下给出它。用这种方式替换整个脚本：

<script>
jQuery(document).ready(function(){
  jQuery('.p5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  })
  jQuery('.p5598').hover(function() {
    jQuery('.p5598').popover('show');
  }, function(){
    jQuery('.p5598').popover('hide');
  });
});
</script>