title: some radio buttons not able to be selected in template
body: <p>I'm making a backbone quiz app that uses the question_template below to append questions into a div. Once the first question is answered, the second question is appended, pushing the first one below, etc. Once it gets to the third question, the html radio buttons break. I am not able to select the top button (answer red) for the third question. However, once the fourth question is loaded, and the third question gets pushed down, I am able to select the red button for the third question (although you can't submit anymore because submit becomes disabled by design after questions been answered). In the fourth question, I can't select either of the top two radio buttons. I'm having the same problem in every browser. I've posted an image of the screen with the 3rd and 4th question loaded. I'm wondering if there's something in this template that might explain why I'm having a problem. </p>
  
  <p><strong>Update:</strong> before you read everything, it might help to know that the problem with the radio buttons only happens if I render the questions to div using prepend i.e. $('this.el').prepend, which I want to do to add the questions to the top. If I use append $('this.el').append...the radio buttons work fine, but it doesn't allow me to add new questions to the top. </p>
  
  <p>Code.
      ![</p>
  
  <pre><code>&lt;fieldset id="qbquestion"&gt;
      &lt;legend&gt;{{= question }}&lt;/legend&gt;
        &lt;ul&gt;
      {{ _.each(answers, function(answer) { }}
  
  &lt;li&gt;&lt;input type="radio" name="{{= question }}" value="{{= answer  }}"/&gt; &lt;label for="{{= answer  }}"&gt;{{= answer  }}&lt;/label&gt;&lt;/li&gt;
  
  {{ }); }}
      &lt;/ul&gt;
  
  &lt;/fieldset&gt;
  
        &lt;input type="button" class="action_button" value="Submit" id="answer"&gt;
  
  &lt;/script&gt;][1]
  </code></pre>
  
  <p>Image explanation</p>
  
  <p>For the question, "What is M's favorite color" i'm not able to select the 'red' button until it's been pushed down. For the top question, I'm not able to select either of the top two buttons "pink" or "purp". There are only four questions in the database right now. </p>
  
  <p><img src="https://i.stack.imgur.com/ILFEc.png" alt="enter image description here"></p>
  
  <p>Update
  This is the css styles for the "red" radio button (the one that can't be selected) of the question "What is M's favorite color". The styles are the same if I inspect a different radio button.</p>
  
  <p><img src="https://i.stack.imgur.com/hhT1O.png" alt="enter image description here"></p>
  
  <p>Update
  the html of the question, "what is M's favorite color"<img src="https://i.stack.imgur.com/XiHD8.png" alt="enter image description here"></p>
  
  <p><strong>QuestionView</strong>Update, in the render function, if I use $('this.el').append...then the resulting radio buttons work. However, I wanted to do <code>$('this.el').prepend</code> so the new questions added to the top. If I use prepend, certain radio buttons don't work.</p>
  
  <pre><code>var QuestionView = Backbone.View.extend({
      el: $(".east"), 
      initialize: function(){
  
  
      _.bindAll(this);
      this.compTemplates();
          this.model.bind("gameStartedEvent", this.render, this); 
      this.model.bind("guessCheckedEvent", this.nextQuestion, this);
      this.model.bind("nextQuestionReady", this.render, this);
      },
  
    events: {
        'click #answer': 'checkAnswer'
  
      },
  
    nextQuestion: function(){
      this.model.nextQuestion();
    },
    checkAnswer: function(e){
      $('#answer').attr("disabled", true);
      var selected = $("input[type='radio']:checked");
      var answer = selected.val();
      this.model.set({guess: answer});
       this.model.check();
  
    },
    compTemplates: function(){
      console.log("comp Templates in question view");
      _.templateSettings = {
          interpolate : /\{\{=(.+?)\}\}/g,
          escape : /\{\{-(.+?)\}\}/g,
          evaluate: /\{\{(.+?)\}\}/g
           };
      var template = $('#question_template').html();
  
      this.template = _.template(template);
  
  
    },
  
      render: function(response){
  
      var question = response.question; 
      var answers = response.answers;
      var link = response.link;
      this.correctanswer = response.correctanswer;
  
   $(this.el).append(this.template({ question: question, answers: answers, link: link})); 
  
  
      }
  
  
   });
  </code></pre>