Form inside a bootstrap popover rating javascript it not working

Question

I have the following haml code to create a form inside a 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");
  });

And here is the form inside the popover:

But the javascript that change and select the stars does not work. If i try the same form outside the popover everything works great and I don't understand why.

This the form outside the popover and it works

Any idea please???

Thanks in advance for your help.

Answer 1

You should initialize the ratings functionality for the elements in the popup. These elements are added to DOM dynamically. So they do not have any events attached. One way of add this ratings is listening to even shown.bs.popover on the element like

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

Assuming the element in popover-content with id ratings has the markup for ratings.