Changing data in bootstrap modal

Question

I'm working on jeopardy game where I pass questions into a bootstrap modal based on the button clicked. The button has an attribute data-num, (the index in the array of questions), which is used to to change the title in the modal. It also passes this index as an attribute data-num to the reveal answer button, which, when clicked, will change modal title to the answer.

This works for the first question, but when I click on the second question, the proper question loads, but the answer to the first question loads when I click the getanswer button, even though the proper index shows up in inspect element under button data-num. What am I doing wrong?

 var questions = [{ prompt: "What generic data type should we use when we want to use varying data types for a variable?", correctAnswer: "Object", }, { prompt: "Rewrite the following Javascript statment in C#: var flag = true ", correctAnswer: "bool flag = true" }, { prompt: "double num1 = 9.34534910;\\n int num2= (int)num1;\\nSystem.Console.WriteLine(num2);", correctAnswer: "9" } ]; function showQuestion(event, $modal) { var button = $(event.relatedTarget); var num = parseInt(button.data('num')); var question = questions[num]; $modal.find('.modal-title').text(question.prompt); $modal.find('.modal-body button').attr('data-num', num) } $("#myModal").on('show.bs.modal', function(event) { showQuestion(event, $(this)); } ); $("#myModal").on('hidden.bs.modal', function() { $('#myModal').removeData('bs.modal'); } ); $("#getanswer").click(function() { var num = ($(this).data('num')); console.log(num) } ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bs-example"> <!-- Modal HTML --> <div id="myModal" class="modal fade"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <p class="modal-title" data-answer="">Modal Window</p> <button id="getanswer" type="button" data-num="" class="btn btn-primary clickable">Reveal answer</button> </div> </div> </div> </div> <div class="question"> <button type="button" class="btn btn-info gridbtn ten" data-toggle="modal" data-target="#myModal" data-num="0">$10</button> </div> <div class="question"> <button type="button" class="btn btn-info gridbtn fifty" data-toggle="modal" data-target="#myModal" data-num="1">$50</button> </div> </div> 

Answer 1

Use this (on the #getAnswer click event):

var num = ($(this).attr('data-num'));

instead of

var num = ($(this).data('num'));

Perhaps since you set the value with attr, it also works to retrieve it that way.

It DOES seem like your way should work, but this is what I found through trying stuff.