javascript - Bootstrap 数据表 - jquery onclick 函数在第二页(分页)不起作用

Question

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

我正在使用这个 Bootstrap 模板。我的表有 4 页(分页)每页有 10 行

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

此功能在第一页(分页)中正常工作。但它不适用于第二页。如果我删除 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 在服务器端进行的，那么元素将在运行中呈现，因此在这种情况下，委托(delegate)事件将完成这项工作:

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