1
<% if @questions_counter == 2 %>

  <% if @finish == 0 %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question, :finish_btn => @finish_btn })) %>").fadeIn();
  <% else %>
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "grade", :locals => {:correct_answers => @correct_answers, :grade => @grade, :total_questions => @total_questions })) %>").fadeIn();
  <% end %>
<% else %>

  <% if @finish == 0 %>
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question, :finish_btn => @finish_btn })) %>").fadeIn();
  <% else %>
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "grade", :locals => {:correct_answers => @correct_answers, :grade => @grade, :total_questions => @total_questions })) %>").fadeIn();
  <% end %>
<% end %>

$(document).ready(function(){
    $(":checkbox").on('change',function() {
      var that = this;

      if (!$(this).parent().hasClass("remember-label")){
        $(this).parent().css("background-color", function() {
            return that.checked ? "#C0E9F7" : "";
        });
      }

    });

    $("input[type=radio]").on('change',function() {
      $(this).parents().eq(1).siblings().css("backgroundColor","");
      $(this).parents().eq(1).css("backgroundColor","#C0E9F7");

    });

});

Under normal circumstances the javascript code if the page is reloaded properly it works. If its like this though it does not work. When i click on label which wraps the inputs and it has correct for attribute, nothing happens not even the checkbox/radio button gets checked.

<label for="choice_<%= choice.id %>">
            <%= radio_button_tag("choice","#{choice.id}",false,class:"radio big-radio") %>
            <% if choice.image? %>
              <%= image_tag rewrite_url(choice.image_url(:resized)), class:"choice-image" %>
            <% else %>
              <%= choice.description %>
            <% end %>

          </label>
Petros Kyriakou
  • 5,214
  • 4
  • 43
  • 82
  • Is it because you attach events directly when the page is loaded so when you load them dynamically the events do not get attached – epascarello Jan 29 '16 at 14:08
  • so what is the proposed solution to this? – Petros Kyriakou Jan 29 '16 at 14:09
  • `$( "body" ).on( "change", "input[type=radio]", function() { //your code });`. Here, the event is bound to body, which is always there, and when the event is triggered it checks to see what element it was triggered for, which will include elements added after dom ready. You can make this more efficient by changing "body" to the container of the dynamically added elements: that way, there will be less change events which are considered by the function in the first place (checking every change event in the body could get slow). – Max Williams Jan 29 '16 at 14:15
  • @MaxWilliams how can i change the snippet you gave me to include both input type radio and input type checkbox? because sometimes its checkboxes and sometimes radio buttons – Petros Kyriakou Jan 29 '16 at 14:18
  • @MaxWilliams i have tried with two selectors but it does not work. It seems to choose one of the two and trigger the event on them. – Petros Kyriakou Jan 29 '16 at 14:39
  • Use a comma: `"input[type=radio], input[type=checkbox]"` – Max Williams Jan 29 '16 at 15:06

0 Answers0