Jquery not working for Safari

Question

I have some jquery which works for IE, Chrome and Firefox but not in safari. If the user clicks the button it calls toggleClass if the button clicked does not have said class. Here is a Fiddle

Here is the HTML

<form id="quoteform" action="confirm_plan_options.php" method="post" name="quoteform">
<div id="deduct_term_holder">
  <h3 class="fs-subtitle">Deductibles</h3>
  <input name="disappearing" value="Disappearing" class="deductible" id="deductible0" type="button">
  <input style="display: none;" name="zero" value="$0" class="deductible" id="deductible1" type="button">
  <input name="fifty" value="$50" class="deductible" id="deductible2" type="button">
  <input name="onehundred" value="$100" class="deductible uiButton" id="deductible3" type="button">
  <input name="two-hundred" value="$200" class="deductible" id="deductible4" type="button">
  <br>
  <h3 class="fs-subtitle">Term Years</h3>
  <input name="1-year" value="1 years" class="term-years" id="1_year_term" type="button">
  <input name="2-year" value="2 years" class="term-years uiButton" id="2_year_term" type="button">
  <input name="3-year" value="3 years" class="term-years" id="3_year_term" type="button">
  <input name="4-year" value="4 years" class="term-years" id="4_year_term" type="button">
  <input name="5-year" value="5 years" class="term-years" id="5_year_term" type="button">
  <input style="display: none;" name="6-year" value="6 years" class="term-years" id="6_year_term" type="button">
  <input style="display: none;" name="7-year" value="7 years" class="term-years" id="7_year_term" type="button">
  <input style="display: none;" name="8-year" value="8 years" class="term-years" id="8_year_term" type="button">
</div>
<div id="plansdiv" style="width:100%">
  <table id="plans">
    <caption>Ford Extended Service Care Plans
      <br>Click on price to select.</caption>
    <tbody>
      <tr>
        <td>Term Miles</td>
        <td>End Year</td>
        <td>PremiumCare</td>
        <td>ExtraCare</td>
        <td>BaseCare</td>
        <td>PowertrainCare</td>
      </tr>
      <tr>
        <td class="term_miles">12,000</td>
        <td>2018</td>
        <td>
          <input name="PremiumCare_plan" value="$4,200" class="plan-price" type="submit">
        </td>
        <td>
          <input name="ExtraCare_plan" value="$3,540" class="plan-price" type="submit">
        </td>
        <td>
          <input name="BaseCare_plan" value="$3,135" class="plan-price" type="submit">
        </td>
        <td>
          <input name="PowertrainCare_plan" value="$2,715" class="plan-price" type="submit">
        </td>
      </tr>
      <tr>
        <td class="term_miles">18,000</td>
        <td>2018</td>
        <td>
          <input name="PremiumCare_plan" value="$4,255" class="plan-price" type="submit">
        </td>
        <td>
          <input name="ExtraCare_plan" value="$3,730" class="plan-price" type="submit">
        </td>
        <td>
          <input name="BaseCare_plan" value="$3,295" class="plan-price" type="submit">
        </td>
        <td>
          <input name="PowertrainCare_plan" value="$2,820" class="plan-price" type="submit">
        </td>
      </tr>
      <tr>
        <td class="term_miles">24,000</td>
        <td>2018</td>
        <td>
          <input name="PremiumCare_plan" value="$4,410" class="plan-price" type="submit">
        </td>
        <td>
          <input name="ExtraCare_plan" value="$3,860" class="plan-price" type="submit">
        </td>
        <td>
          <input name="BaseCare_plan" value="$3,400" class="plan-price" type="submit">
        </td>
        <td>
          <input name="PowertrainCare_plan" value="$2,900" class="plan-price" type="submit">
        </td>
      </tr>
      <tr>
        <td class="term_miles">36,000</td>
        <td>2018</td>
        <td>N/A</td>
        <td>
          <input name="ExtraCare_plan" value="$4,125" class="plan-price" type="submit">
        </td>
        <td>
          <input name="BaseCare_plan" value="$3,855" class="plan-price" type="submit">
        </td>
        <td>
          <input name="PowertrainCare_plan" value="$3,240" class="plan-price" type="submit">
        </td>
      </tr>
      <tr>
        <td class="term_miles">48,000</td>
        <td>2018</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>N/A</td>
      </tr>
      <tr>
        <td class="term_miles">60,000</td>
        <td>2018</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>N/A</td>
      </tr>
      <tr>
        <td class="term_miles">75,000</td>
        <td>2018</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>N/A</td>
        <td>N/A</td>
      </tr>
    </tbody>
  </table>
  <br>
  <input name="plan_type" value="used" type="hidden">
</div>
<input type="button" id="to-vehicle-info" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</form>

Css

button.term-years,
button.deductible {
  border: 1px solid black;
  border-radius: 2px;
  background-color: #27AE60;
  padding: 5px 10px;
}

input.term-years,
input.deductible {
  border: 1px solid black;
  border-radius: 2px;
  background-color: #27AE60;
  padding: 5px 5px;
}

input.uiButton {
  color: red!important;
  background-color: #000;
}

input.deductible:hover,
input.term-years:hover,
input.plan-price:hover {
  color: red !important;
  box-shadow: 0 0 0 2px white, 0 0 0 3px red;
  background-color: #000;
}

.plan-price {
  background-color: #27AE60;
  padding: 2px;
}

#plans caption {
  text-align: center;
}

#plans {
  margin: 0 auto;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
  font-size: .8em;
  color: #808080;
  width: 90%;
}

#plans table,
td {
  border: 1px solid #ccc;
}

#plans td {
  padding: 5px;
}

#plans tbody tr:nth-child(even) {
  background: WhiteSmoke;
}

And the Jquery

    $('.deductible').click(function(e) {
  var termstr = '';
  var deductstr = '';
  factory_warranty = $('input[name=factory_warranty]:checked').val();
  snowplow = $('input[name=snowplow]:checked').val();
  usage = $('input[name=usage]:checked').val();
  milestr = $('#current_milage').val();
  turbo = $('input[name=turbo]:checked').val();
  purchase_date = $('input[name=purchase_date]:checked').val();
  $('.deductible').each(function() {
    if ($(this).is(":focus") && !$(this).hasClass('uiButton') && !$('.deductible').hasClass('uiButton')) {
      $(this).toggleClass('uiButton');
    } else if ($(this).hasClass('uiButton') && $(this).is(':focus')) {
      e.preventDefault();
    } else if (!$(this).hasClass('uiButton') && !$('.term-years').is(':focus') && !$('.term-years').hasClass('uiButton') && $(this).is(':focus')) {
      $(this).toggleClass('uiButton');
    } else if (!$(this).hasClass('uiButton') && !$('.term-years').is(':focus') && $('.term-years').hasClass('uiButton') && $(this).is(':focus') && $('.deductible').hasClass('uiButton')) {
      $('.deductible').removeClass('uiButton');
      $(this).toggleClass('uiButton');
    }
  });
  $('.term-years').each(function(i) {
    if ($('#' + i + '_year_term').hasClass('uiButton')) {
      termstr = $('#' + i + '_year_term').val();
    }
  });
  $('.deductible').each(function(i) {
    if ($('#deductible' + i).hasClass('uiButton')) {
      deductstr = $('#deductible' + i).val();
      if (deductstr.indexOf('$') > -1) {
        deductstr = deductstr.replace(/\D/g, '');
      }
    }
  });
  //alert('plan code is' + plan_code);
  get_plan_pricing(plan_type, plan_code, termstr, deductstr, milestr, factory_warranty, snowplow, usage, turbo, purchase_date);
});
$('.term-years').click(function() {
  var str = $(this).val();
  milestr = $('#current_milage').val();
  var deductstr = '';
  factory_warranty = $('input[name=factory_warranty]:checked').val();
  snowplow = $('input[name=snowplow]:checked').val();
  usage = $('input[name=usage]:checked').val();
  milestr = $('#current_milage').val();
  turbo = $('input[name=turbo]:checked').val();
  purchase_date = $('input[name=purchase_date]:checked').val();
  $('.term-years').each(function() {
    if ($(this).is(":focus") && !$(this).hasClass('uiButton') && !$('.term-years').hasClass('uiButton')) {
      $(this).toggleClass('uiButton');
    } else if ($(this).is(":focus") && !$(this).hasClass('uiButton') && $('.term-years').hasClass('uiButton')) {
      $('.term-years').removeClass('uiButton');
      $(this).toggleClass('uiButton');
    }
  });
  $('.deductible').each(function(i) {
    if ($('#deductible' + i).hasClass('uiButton')) {
      deductstr = $('#deductible' + i).val();
      if (deductstr === 'Disappearing') {
        return;
      } else {
        deductstr = deductstr.replace(/\D/g, '');
      }
    }
  });
  //alert('plan code is ' + plan_code);
  get_plan_pricing(plan_type, plan_code, str, deductstr, milestr, factory_warranty, snowplow, usage, turbo, purchase_date);
});
$('.plan-price').click(function(e) {
  if ($('.next').prop('disabled', true)) {
    $('.next').prop('disabled', false);
  }
  if ($(this).is(':focus') && !$(this).hasClass('uiButton') && !$('.plan-price').hasClass('uiButton')) {
    $(this).toggleClass('uiButton');
  } else if ($('.plan-price').hasClass('uiButton') && $(this).is(':focus') && !$(this).hasClass('uiButton')) {
    $('.plan-price').removeClass('uiButton');
    $(this).toggleClass('uiButton');
  }
  //alert($(this).val());
  e.preventDefault();
});

Those variables `factory_warranty`, `snowplow`, etc. should be declared with `var`. — Pointy, Jan 07 '16 at 20:18
@Pointy Doing so did not affect the outcome but i have updated the code. — Raymond Feliciano, Jan 07 '16 at 20:20

score 0 · Answer 1 · answered Jan 08 '16 at 17:42

I finally managed to get this to work using

if(!$(e.target).hasClass('uiButton') && !$('.plan-price').hasClass('uiButton')){
$(e.target).toggleClass('uiButton');
}
else if($('.plan-price').hasClass('uiButton') && $(e.target) && !$(e.target).hasClass('uiButton')){
$('.plan-price').removeClass('uiButton');
$(e.target).toggleClass('uiButton');
}

which i found at here on stack overflow

Jquery not working for Safari

1 Answers1