Onchange事件js

Question

我已经在表格中找到了这个

  

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);
    })
});

但没有任何成功＆＃39;在控制台。脚本连接正确，因为另一个事件正常工作。

Answer 1

checkbox不是选择器建议的元素。对于您的选择器，您希望选择type的{​​strong>属性，其值为checkbox，为此，它将如下所示：

.main td [type=checkbox]

如您所见，将属性键和值放在括号中（值是可选的，但在您的情况下需要它）。

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不是元素，因此不匹配任何内容：

'.main td checkbox'

您可以定位输入或定位.checkbox类

$(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

您有两个主要问题

您正在使用类名称选择器checkbox，这类似于获取元素“复选框”。

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

您没有选择输入checkbox。要选择这些复选框，请使用此选择器：

".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>