Question

感谢阅读。

我使用datatable插件为我的网站显示数据库中的一些数据。我还有一个小的jquery ajax插件，我写这个插件来更新数据库。问题是每个页面/集上的数据表显示10。在前10个结果中，如果使用开/关开关（复选框），它会触发我写的ajax jquery函数，但如果你转到第二页/设置或显示超过10个开/关开关（复选框）不会触发jQuery的。控制台中没有任何事情发生。

Here is the site that I'm working on.

这里是复选框触发的jquery代码

<script>

jQuery(document).ready(function($){

 $(".community-check").change(function(event) {

    var Tag = $(this).val();

    $.ajax({
      url: "/ajax.php?Page=subscribe",
      type: "POST",
      dataType: "json",
      data: {Tag:Tag},
      success: function(data, textStatus){
      if(data.status == 'true'){
         return true;
      }else{
         alert( data.message );
         return false;
      }
    },
    error:function(){
      alert('error');
    }
  });
});
});
</script>

数据表的jquery

<script>
    jQuery(function($) {
        var colorbox_params = {
            reposition:true,
            scalePhotos:true,
            scrolling:false,
            previous:'<i class="icon-arrow-left"></i>',
            next:'<i class="icon-arrow-right"></i>',
            close:'&times;',
            current:'{current} of {total}',
            maxWidth:'100%',
            maxHeight:'100%',
            onOpen:function(){
                document.body.style.overflow = 'hidden';
            },
            onClosed:function(){
                document.body.style.overflow = 'auto';
            },
            onComplete:function(){
                $.colorbox.resize();
            }
        };

        $('[data-rel=popover]').popover({container: 'body',html:true});

        $('#community-table').dataTable( {
            "oLanguage": {
                "sLengthMenu": "_MENU_ adet kayıt göster",
                "sZeroRecords": "Boş",
                "sInfo": "Sonuç _START_ ile _END_ arası _TOTAL_ kayıt",
                "sInfoEmpty": "Gösterilen 0 ile 0 arası 0 kayıt",
                "sInfoFiltered": "(_MAX_ etiket içinden)",
                "sProcessing": "Arıyor...",
                "sSearch": "Ara:",
                "sLoadingRecords":"Yükleniyor..."
            }
        });
    });
</script>

表格html

  <html>
     <div class="col-xs-12">
            <div class="table-header">
                Sessions
            </div>
            <div class="table-responsive">
                <table id="session-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <label>
                            <input name="Tag" class="ace ace-switch ace-switch-6 community-check" value="'.$ROW['Tag'].'" type="checkbox" '.($ROW['Joined'] == $_SESSION['UserID'] ? 'checked' : '').'/>
                            <span class="lbl"></span>
                            </label>
                        </tr>
                    </thead>
                    <tbody>
                      <tr>
                      <td></td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
 </html>

http://www.buyuyenicerik.com/Sources/JavaScript/jquery.dataTables.min.js http://www.buyuyenicerik.com/Sources/JavaScript/jquery.dataTables.bootstrap.js

Answer 1

使用.on()方法委托事件在TABLE级别绑定它，这是一个静态容器：

$('#community-table').on("change", ".community-check", function(event) {...});

在10个结果之后，Checkbox不会使用datatable插件触发jquery函数

1 个答案: