0

I have a jsfiddle here: http://jsfiddle.net/ybZvv/22/

The situation I have is that if you click on "Select All Answers" button, it will turn on all the letter buttons (al trun green). Now if you click on the "Add Question" button it appends the buttons from the top into a table row. You will see a bunch of text inputs appear below the table, this shows the values of all of the buttons which are turned on in the appended row.

This is fine. But the problem is below:

The problem though is that if you click on the "Remove All Answers" button IN THE APPENDED ROW, then all of the buttons are turned off which is fine but it does not remove/hide the text inputs for all of those values which buttons are turned off.

If you then click on the "Select All Answers" button IN THE APPENDED ROW, then it turns all ofthe buttons in the row but no text input appears showing all of the values which buttons are turned on.

So my question is that if the user clicks on the "Select All Answers" button in an appended table row, how can we get it to display all of the text inputs of the buttons which are turned on in that row?

Also if the user clicks on the "Remove All Answers" button in the appended row, I want it to remove all of the text inputs of those buttons turned off within that row. How can this be achieved?

user1723760
  • 1,157
  • 1
  • 9
  • 18

1 Answers1

1

The solution is to "trigger" a click on the buttons instead of simply taking off one class and adding another.

So instead of 

$('.answerBtns:visible', context).removeClass('answerBtnsOff').addClass('answerBtnsOn');

you should use:

$('.answerBtnsOff:visible', context).trigger('click');

to simulate a click on the button to do proper handling.

Here's the edited fiddle

Sidharth Mudgal
  • 4,234
  • 19
  • 25