Javascript 引导程序内的窗体弹出框是否不起作用

我有下面的haml代码在引导弹出框中创建一个表单

%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外的表单，它可以工作

有什么想法吗

---

提前感谢你的帮助

您应该初始化弹出窗口中元素的分级功能。这些元素被动态地添加到DOM中。所以他们没有任何附加事件。 添加此评级的一种方法是在元素上收听甚至

show.bs.popover

，如

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

---

假设id为

ratings

的

popover content

中的元素具有评级标记。

使用

html（）

方法时，绑定到元素的所有事件都将丢失。使用starsCharlietfl的活动授权，请给我一些代码好吗。