if input stepper value > 0 addClass to parent div else removeClass

Question

I need to add the class (device-added) to the parent dive (device) if the user increases the input value above (0) and remove it if he decided to set the value back to (0) here what I did so far:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2>Some Text</h2>
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="device workstations">
        <h3>Workstations</h3>
        <div class="sub">
          <input id="workstation" type="text" value="0" min="0" max="1000" class="form-control stepper">
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="device servers">
        <h3>Servers</h3>
        <div class="sub">
          <input id="server" type="text" value="0" min="0" max="1000" class="form-control stepper">
        </div>
      </div>
    </div>
    More cols as above...
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <a href="#" class="make_url">Order URL</a>
    </div>
  </div>
</div>
<script>
  $('.make_url').click(function(e) {
    e.preventDefault();

    var url = "http://www.example.com/cart.php?a=add&pid=" + $("input[name=data-location]:checked").data('id') + "&configoption[569]=" + $('#workstation').val() + "&configoption[570]=" + $('#server').val() + "&configoption[572]=" + $('#mobile').val();
    alert(url);
    //window.location.href = url;
    /*
    window.open(url, '_blank');
    */

  });

  // This is not working as it should
  $('input.stepper').click(function() {
    if ($(this).val() > 0) {
      $(this).parent().parent().parent().addClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
    } else {
      $(this).parent().parent().parent().removeClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
    }
  });
</script>

The above class work only if click on the input but not when using the up/down arrows.

Thanks in advance.

Edit: The jquery.stepper.min.js is used for stepper

The stepper will change the output sub div to

<div class="sub">
    <div class="stepper-wrap" style="margin: 0px 45px 0px 0px;">
        <input id="servers" value="0" min="0" max="1000" class="form-control stepper" style="margin: 0px;" type="text">
        <div class="stepper-btn-wrap">
            <a class="stepper-btn-up">▴</a>
            <a class="stepper-btn-dwn">▾</a>
        </div>
    </div>
</div>

@Mihai using .parents() will addClass to all divs not only the parent.

I can and will use type="number" for now and remove the stepper and use $('input.form-control').click(function() { It will do it as Bendy say, and lose custom look as to attach and do it some other way because input type number is ugly

Thank you all for your help.

using jquery stepper

Answer 1

The solution as below:

<input id="workstation" type="number" value="0" min="0" max="1000" class="form-control stepper" onchange="alert(this.value)">

• Change type="text" to type="number"
• Use onchange event instead. If jQuery: $('input.stepper').change(function(){ ... })
• Should convert value to int using parseInt($(this).val())