Onchange event js

Question

I've got this on form

HTML

 <td>
   <div class="checkbox checbox-switch switch-info">
      <label>
      @if ($value->active == '1')
      <input type="checkbox" name="play" checked="">
      <span></span>
      @else
      <input type="checkbox" name="play">
      <span></span>
      @endif
      </label>
   </div>
</td>

Javascript

$(document).ready(function(){
    $(document).on('change','.main td checkbox',function (e)
    {
        console.log('success');
        e.preventDefault();
        var element = $(this);
        updateData(element);
    })
});

But there is nothing 'success' in console. Script is connect correctly because another event works correctly.

Answer 1

checkbox isn't an element as your selector suggests. For your selector, you want to select the attribute of type with a value of checkbox, and to do so it would look like this:

.main td [type=checkbox]

As seen you place the attribute key and value in brackets (value is optional, but in your case it is needed).

Answer 2

$(document).ready(function(){
  $(this).on('change','input[type=checkbox]',function (e)
    {    
        console.log('success');
        e.preventDefault();
        var element = $(this);
        //updateData(element);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="main">
    <td>
      <div class="checkbox checbox-switch switch-info">
        <label>
          @if ($value->active == '1')
          <input type="checkbox" name="play" class="play" checked="" value="1">
          <span></span> @else
          <input type="checkbox" name="play" class="play" value="2">
          <span></span> @endif
        </label>
      </div>
    </td>
  </tr>
</table>

Answer 3

checkbox is not an element, so this will not match anything:

'.main td checkbox'

You can either target the input or target the .checkbox class

$(document).ready(function() {

  $(document).on('change', '.main td input', function(e) {
    console.log('change');
    e.preventDefault();
    var element = $(this);
    //updateData(element);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <table>
    <tr>
      <td>
        <div class="checkbox checbox-switch switch-info">
          <label>
        <input type="checkbox" name="play" checked="">
        <span></span>
      </label>
        </div>
      </td>
    </tr>
  </table>
</div>

Answer 4

You have two main issues

You're using the class name selector checkbox which is something like to get the elements "checkbox".

$(document).on('change','.main td checkbox',function (e)
                                  ^

You're not selecting the input checkbox. To select those checkboxes, use this selector:

".main td .checkbox [type="checkbox"]"

$(document).ready(function() {
  $(document).on('change', '.main td .checkbox [type="checkbox"]', function(e) {
    console.log('success');
    e.preventDefault();
    //var element = $(this);
    //updateData(element);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class='main'>
<td>
  <div class="checkbox checbox-switch switch-info">
    <label>
      <input type="checkbox" name="play" checked=""> checkbox
      <span></span>
      </label>
  </div>
</td>
<tr>
</table>