在一个bootstrap popover评级javascript内部表单不起作用

Question

我有以下haml代码在bootstrap popover中创建一个表单

%a.btn.btn-warning.btn-xs{:href => "#", :style => "margin-bottom: 5px;", "data-html"=>"true", "data-toggle" => "popover", :type => "button", id: "review-box"}
              %i.fa.fa-pencil
                Write a review
            #popover-head.hide Review this teacher
            #popover-content.hide
              = form_tag dashboard_kid_ratings_url(current_kid), :method => 'post', :multipart => true do 
                .form-group
                  %span
                    %i.fa.fa-star-o#one
                    %i.fa.fa-star-o#two
                    %i.fa.fa-star-o#three
                    %i.fa.fa-star-o#four
                    %i.fa.fa-star-o#five
                .form-group
                  = text_area(:rating, :comment, options = { placeholder: _('Comment'), class: "form-control", rows: 5})
                  = hidden_field_tag "rating[user][]", current_kid
                  = hidden_field_tag "rating[teacher][]", @kid
                  = hidden_field_tag "rating[stars][]", nil
                = submit_tag _('Save'),  class: 'btn btn-blabloo btn-xs'


:javascritp

$("#review-box").popover({ 
    trigger: "click", 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
  });

  $("#one").click(function (){
    $("#one").attr('class', 'fa fa-star');
    $("#two").attr('class', 'fa fa-star-o');
    $("#three").attr('class', 'fa fa-star-o');
    $("#four").attr('class', 'fa fa-star-o');
    $("#five").attr('class', 'fa fa-star-o');
    $("#rating_stars_").val("1");
  });
  $("#two").click(function (){
    $("#one").attr('class', 'fa fa-star');
    $("#two").attr('class', 'fa fa-star');
    $("#three").attr('class', 'fa fa-star-o');
    $("#four").attr('class', 'fa fa-star-o');
    $("#five").attr('class', 'fa fa-star-o');
    $("#rating_stars_").val("2");
  });
  $("#three").click(function (){
    $("#one").attr('class', 'fa fa-star');
    $("#two").attr('class', 'fa fa-star');
    $("#three").attr('class', 'fa fa-star');
    $("#four").attr('class', 'fa fa-star-o');
    $("#five").attr('class', 'fa fa-star-o');
    $("#rating_stars_").val("3");
  });
  $("#four").click(function (){
    $("#one").attr('class', 'fa fa-star');
    $("#two").attr('class', 'fa fa-star');
    $("#three").attr('class', 'fa fa-star');
    $("#four").attr('class', 'fa fa-star');
    $("#five").attr('class', 'fa fa-star-o');
    $("#rating_stars_").val("4");
  });
  $("#five").click(function (){
    $("#one").attr('class', 'fa fa-star');
    $("#two").attr('class', 'fa fa-star');
    $("#three").attr('class', 'fa fa-star');
    $("#four").attr('class', 'fa fa-star');
    $("#five").attr('class', 'fa fa-star');
    $("#rating_stars_").val("5");
  });

以下是popover中的表单：

但改变和选择星星的JavaScript不起作用。如果我在popover外面尝试相同的表格，一切都很好，我不明白为什么。

这是popover外面的形式，它可以正常工作

请问??? ???

提前感谢您的帮助。

Answer 1

您应该初始化弹出窗口中元素的评级功能。这些元素动态添加到DOM。所以他们没有附加任何事件。 添加此评级的一种方法是在元素上听取shown.bs.popover，如

$("#review-box").on('shown.bs.popover', function(){
  $('#ratings').ratings();
}

假设popover-content中ID为ratings的元素具有评分标记。