Question

http://demo.onokumus.com/metis/table.html

我正在使用这个引导程序模板。我的表有4页（分页），每行有10行

$(".view").click(function(){
  alert(attr("marks"));
});

此功能在第1页（分页）中正常工作。但它不适用于第二页。如果我删除了id =“dataTable”，则所有行都在1页中，并且它正常工作。在这个问题上帮助我。提前致谢

<!--Begin Datatables-->
            <div class="row">
              <div class="col-lg-12">
                <div class="box">
                  <header>
                    <div class="icons">
                      <i class="fa fa-table"></i>
                    </div>
                    <h5>History</h5>
                  </header>
                  <div id="collapse4" class="body">
                    <table id="dataTable" class="table table-bordered table-condensed table-hover table-striped">
                      <thead>
                        <tr>
                          <th>ID &nbsp;</th>
                          <th>Time &nbsp;</th>
                          <th>Status code &nbsp;</th>
                          <th>Action &nbsp;</th>
                        </tr>
                      </thead>
                      <tbody>

                <tr>
                  <td>12038</td>
                  <td>28 Jun 2014, 07:39:36 PM</td>
                  <td>6193</td>           
                  <td><img marks="16" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12039</td>
                  <td>28 Jun 2014, 07:39:41 PM</td>
                  <td>8772</td>           
                  <td><img marks="56" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12040</td>
                  <td>28 Jun 2014, 07:39:46 PM</td>
                  <td>3665</td>           
                  <td><img marks="83" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12041</td>
                  <td>28 Jun 2014, 07:39:51 PM</td>
                  <td>8275</td>           
                  <td><img marks="25" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12042</td>
                  <td>28 Jun 2014, 07:39:56 PM</td>
                  <td>4846</td>           
                  <td><img marks="61" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12043</td>
                  <td>28 Jun 2014, 07:40:01 PM</td>
                  <td>1220</td>           
                  <td><img marks="88" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12044</td>
                  <td>28 Jun 2014, 07:40:06 PM</td>
                  <td>1580</td>           
                  <td><img marks="99" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12045</td>
                  <td>28 Jun 2014, 07:40:11 PM</td>
                  <td>4203</td>           
                  <td><img marks="63" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12046</td>
                  <td>28 Jun 2014, 07:40:16 PM</td>
                  <td>8210</td>           
                  <td><img marks="93" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12047</td>
                  <td>28 Jun 2014, 07:40:21 PM</td>
                  <td>2317</td>           
                  <td><img marks="24" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12048</td>
                  <td>28 Jun 2014, 07:40:26 PM</td>
                  <td>7581</td>           
                  <td><img marks="90" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12049</td>
                  <td>28 Jun 2014, 07:40:31 PM</td>
                  <td>3155</td>           
                  <td><img marks="93" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12050</td>
                  <td>28 Jun 2014, 07:40:36 PM</td>
                  <td>5035</td>           
                  <td><img marks="86" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12051</td>
                  <td>28 Jun 2014, 07:40:41 PM</td>
                  <td>9812</td>           
                  <td><img marks="41" class="view" src="assets/img/icon/view.png"></td>
                </tr>           

                <tr>
                  <td>12052</td>
                  <td>28 Jun 2014, 07:40:46 PM</td>
                  <td>1418</td>           
                  <td><img marks="29" class="view" src="assets/img/icon/view.png"></td>
                </tr>                   

                    </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div><!-- /.row -->

            <!--End Datatables-->

Answer 1

尝试使用delegated event，如果分页是服务器端通过ajax然后元素将在飞行中呈现，那么在这种情况下委托事件将完成工作：

$("#dataTable").on("click",".view",function(){
  alert(attr("marks"));
});

bootstrap datatable- jquery onclick函数无法从第2页开始工作（分页）

1 个答案: