jQuery method only seems to work once

jQuery method only seems to work once

When I click a title or subtitle, I want the corresponding radio button to display as selected. Right now, it only works the first time. Can someone show me where to fix it so it works on every click of the label? Thanks.

  1. <div id="pageBanner">
    <img id="logoImage" class="draggable" />
    <div id="titleDiv" class="draggable"><label id="title">Team Title</label></div>
    <div id="subtitleDiv"><label id="subtitle">Team subtitle that might be long</label></div>
    </div>

    <div id="editorSelection">
    <h2>Select area to edit: </h2><br />
    <input type="radio" name="areaToEditSelection" value="title" />Title
    <input type="radio" name="areaToEditSelection" value="subtitle" />Subtitle
    <input type="radio" name="areaToEditSelection" value="Logo" />Logo
    </div>

  3. $(document).ready(function () {
  4. // Keep the value of the selected Div that is currently being worked with.
  5. // Default to title.
  6. var selectedLabelDivId = '#titleDiv';

  8. // Keep the value of the selected label that is currently being worked with.
  9. var selectedLabelId = '#title';

  11. getOriginialValues();

  13. // Original Attribute Values
  14. var originalLogoImageTop = $('#logoImage').css('top');
  15. var originalLogoImageLeft = $('#logoImage').css('left');

  17. // The size is the values of whichever control we are working with at the time (default is title).
  18. var originalSize;
  19. var originalTop;
  20. var originalLeft;
  21. var originalColor;
  22. var originalFont;
  23. var originalAlignment;
  25. $('#titleDiv').click(function () {
  26. // Set the radio buttons to the selected label that is currently being worked with.
  27. $('input:radio[name=areaToEditSelection]:nth(0)').attr('checked', true);

  29. // Set the currently selected label (title or subtitle).
  30. selectedLabelId = '#title';
  31. selectedLabelDivId = '#titleDiv';
  33. // Get the current values of the title or subtitle in case the user chooses to undo their changes.
  34. getOriginialValues();
  35. return false;
  36. });

  38. $('#subtitleDiv').click(function () {
  39. // Set the radio buttons to the selected label that is currently being worked with.
  40. $('input:radio[name=areaToEditSelection]:nth(1)').attr('checked', true);

  42. // Set the currently selected label (title or subtitle).
  43. selectedLabelId = '#subtitle';
  44. selectedLabelDivId = '#subtitleDiv';
  46. // Get the current values of the title or subtitle in case the user chooses to undo their changes.
  47. getOriginialValues();
  48. return false;
  49. });

  51. $('input[name=areaToEditSelection]').click(function () {
  52. selectedLabelDivId = '#' + $("input[name='areaToEditSelection']:checked").val() + 'Div';
  53. selectedLabelId = '#' + $("input[name='areaToEditSelection']:checked").val();
  54. });
  57. function getOriginialValues() {
  58. originalTop = $(selectedLabelDivId).css('top');
  59. originalLeft = $(selectedLabelDivId).css('left');
  60. originalAlignment = $(selectedLabelDivId).css('text-align');

  62. originalSize = $(selectedLabelId).css('font-size');
  63. originalColor = $(selectedLabelId).css('color');
  64. originalFont = $(selectedLabelId).css('font-family');
  65. var originalText = $(selectedLabelId).text();
  66. $('.hoverBox').initColor = originalColor;

  68. // Set the dropdown of type face fonts to the current type face, which defaults to Times New Roman if never selected.
  69. //$('#titleFontFamilySelector').val(originalFont);
  70. $("#titleFontFamilySelector option[value=" + originalFont + "]").attr("selected", "selected");

  72. // Put the value of the title/subtitle into the textbox so it can be edited.
  73. $('#titleInput').val(originalText);
  74. }
  75. });