Question

我正在使用jQuery评级插件（http://wbotelhos.com/raty）。如果我把它放在一个Bootstrap popover中，它就不再工作了，控制台中没有显示错误。它只显示“星星”，但没有功能。

我尝试了两种不同的评级插件 - 都不在popover内部工作。

html：

<button id="popup_rating" data-container="body" data-html="true" data-trigger="click" data-placement="top" data-title="Rating" class="btn rating">Rating</button>
<div id="popover_content_wrapper" class="hide">
        <div id="star"></div>
</div>

js：

<script>
    $(function () {

        ...

        $("#popup_rating").popover({
            content: function() {
              return $('#popover_content_wrapper').html();
            }
        });  
        $('#star').raty();

    })
</script>

Answer 1

我自己修复了它并将所有内容放在data-content-attribute中：

<button id="popup_rating"  data-container="body" data-html="true" 
data-trigger="click" data-placement="top" data-title="Rating" class="btn rating" 
data-content="Hallo: <div id='star'></div><script>$(function () { 
$('#star').raty({ path: 'js/' }); } </script>">Rating</button>

不确定这是否是优雅的方式，但它有效： - ）

Answer 2

有更简单的解决方案...只需在弹出窗口的末尾添加.click并像下面的示例一样调用raty ...就像一个魅力......我也以同样的方式添加了bootstrap滑块

$('.popover-input-1').popover(
{
  html: true,
  trigger: 'click',
  content: $(".form-input-1").html()
}).click(function(){
//raty star rating  
  $('#star').raty();

//bootstrap slider
  $('#sl1').slider({
    formater: function(value) {
      return 'Current value: '+value;
    }
  });
});

jquery rating-plugin在bootstrap popover中不起作用

2 个答案: