Datatables Tôi không thể gọi một sự kiện onclick sau khi tôi phân trang?

Question

Tôi đang sử dụng http://datatables.net/

Bảng giới thiệu trên trang chủ của họ giống với khá nhiều điều tương tự mà tôi đang sử dụng (pagination, cụ thể), ngoại trừ mỗi hàng có diện tích to click:

<a href="#" class="show-post"><%= Post.title %></a>

Liên kết này sẽ mở hộp thoại giao diện người dùng jquery hiển thị một số thông tin được yêu cầu ajax.

Phần 1 (giải quyết), xem phần 2 dưới đây

Tôi đang cố gắng để chạy một sự kiện onclick mà hoạt động bình thường trên trang một, nhưng ngay sau khi tôi đi đến trang 2 (hoặc bất kỳ người khác) nó ngừng hoạt động. Tôi đã kiểm tra nguồn để chắc chắn rằng nó không làm bất cứ điều gì vui trong tất cả các mã là infact có (tất cả các hàng, ngay cả những người ẩn bởi các pagination)

Bất kỳ ý tưởng?

$(function() { 
    $('#dialog').dialog({ 
     autoOpen: false, 
     resizable: false, 
     maxHeight: 600, 
     width: 650, 
     modal: true, 
     beforeClose: function close() { 
      $('#dialog').html(''); 
     } 
    }); 

    $('.show-post').click(function() { 
     clickLink(this); 
     return false; 
    }); 
}); 

Nhờ những người đã trả lời câu hỏi của tôi! Tôi đã khắc phục vấn đề đó.

Phần 2

tiếp theo 'vấn đề' id của tôi thích để có được để làm việc được ... Tôi đang sử dụng các phím mũi tên trái và phải để cho phép họ 'quét' đến dòng kế tiếp hoặc trước đó và hiển thị thông tin. Điều này trái ngược với việc đóng nó và sau đó phải nhấp vào cái tiếp theo.

Tôi muốn làm như vậy khi bạn đến cuối trang, hoặc đầu trang hai, ẩn sau/trước tương ứng sẽ tự động tải trang đó, chuyển đến đầu (hoặc cuối), sau đó mở hộp thoại đó cho hàng đó trên trang khác.

heres chức năng nhấp chuột của tôi (tôi biết loại hình này của lẽ không có cấu trúc tốt nhất ... im mới để jquery)

$(document).ready(function() { 
    oTable = $('#posts').dataTable({ 
     "bJQueryUI": true, 
     "iDisplayLength": 400, 
     "bAutoWidth": false, 
     "sPaginationType": "full_numbers", 
     "aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]] 
    }); 

    $(this).keydown(function(e) { 
     var id = $("#dialog").attr("data-id"); 
     currentPost = $("#posts tr[data-id=" + id + "]"); 

     if (e.keyCode == 39 && $('#dialog').html() != "") { 

      /* Remove current background */ 
      $(currentPost).blur() 
      $(currentPost).removeClass("current"); 
      $(currentPost).find("td.sorting_1").removeClass("current"); 

      var next = currentPost.next().find(".show-post"); 
      clickLink(next); 

     } else if (e.keyCode == 37 && $('#dialog').html() != "") { 

      /* Remove current background */ 
      $(currentPost).removeClass("current"); 
      $(currentPost).find("td.sorting_1").removeClass("current"); 

      var prev = currentPost.prev().find(".show-post"); 
      clickLink(prev) 
     } 
    }); 
}); 

heres bấm chức năng thực tế

function clickLink(src) { 
var post = $(src); 
var id = $(post).parent().parent().attr('data-id'); 

/* Set background for current line */ 
$(post).parent().parent().find("td.sorting_1").addClass("current"); 
$(post).parent().parent().addClass("current"); 

$('#dialog').attr("data-id", id); 

$('#dialog').load('/show-post/' + id, function() { 

    $.ajax({ 
     type: "POST", 
     url: "/checkstatus/" + id, 
     dataType: "html", 
     error: function(data){ 
      $("#dialog").fadeOut("fast", function() { 
      $("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow"); 
      }); 
     } 
    }); 

    /* Set Visited */ 
    $(post).parent().parent().removeClass("visited").addClass("visited"); 

    $('#dialog').dialog({ 
     title: post.html(), 
     beforeClose: function close() { 
      $(post).parent().parent().find("td.sorting_1").removeClass("current"); 
      $(post).parent().parent().removeClass("current"); 
     }, 
     buttons: { 
      "Email 1": function() { 
       $.ajax({ 
        type: "POST", 
        url: "/get-email/" + id + "/" + "1", 
        dataType: "html", 
        success: function(data) { 
         window.location.href = data + "&subject=" + post.html(); 
        } 
       }); 
      }, 

     } 
    }); 
    $('#dialog').dialog('open'); 
}); 
return false; 
}; 

Answer 1

Ví dụ trên liên kết bạn cung cấp dường như đang thêm/xóa các phần tử DOM, có nghĩa là các phần tử trên các trang tiếp theo có thể không nằm trong DOM khi tải trang. Bạn đã thử sử dụng ủy quyền sự kiện chưa?

$(<root element>).delegate('.show-post', 'click', function() { 
    clickLink(this); 
    return false; 
}); 

đâu <root element> có thể document nhưng nên được đặt thành một yếu tố tổ tiên luôn luôn là trong DOM.

.delegate():

Đính kèm một handler cho một hoặc nhiều sự kiện cho tất cả các yếu tố phù hợp với selector , ngay bây giờ hoặc trong tương lai, dựa trên một tập hợp cụ thể của rễ yếu tố.

Nguồn: http://api.jquery.com/delegate

CẬP NHẬT

Lưu ý rằng .delegate() là một bí danh của .Trên() bây giờ, vì vậy nếu bạn đang sử dụng jQuery 1.7+ tôi sẽ chỉ sử dụng .on() ngay từ khi di chuyển. Hầu hết các cú pháp tương tự, ngoại trừ bộ chọn và sự kiện được hoán đổi: $(<root element>).on('click', '.show-post', function() { ... });

Nguồn: Cảm ơn Greg Pettit, Giỏi Nhận xét

Answer 2

Như @scrappedcola chỉ ra trong các ý kiến, xử lý nhấp chuột của bạn bị mất sau khi pagination. Có chức năng drawCallback cho DataTables bạn có thể triển khai sẽ kích hoạt sau khi bảng được "vẽ lại" (do đó drawCallback). Dưới đây là ví dụ:

$('#someId').DataTable({ 
    lengthMenu: [ 25, 50, 100, 200 ], 
    order: [[ 0, 'asc' ]], 
    processing: true, 
    serverSide: true, 
    stateSave: true, 
    responsive: true, 
    bDestroy: true, 
    columns: [ 
     { data: 'id', name: 'id' }, 
     { data: 'name', name: 'name' }, 
    ], 
    drawCallback: function() { 
     var api = this.api(); 
     api.$('#someBtnId').click(function() { 
      // do some click handler stuff 
     }); 
    } 
}); 

Answer 3

Mã bên dưới đang hoạt động Hoàn hảo. Khi bạn nhấp vào nút pagination 'drawCallback' class Gọi một số chức năng sau khi tải bảng.

 
$("#YourTableID").dataTable({ 
        bJQueryUI: false, 
        bFilter: false, 
        bSearchable: false, 
        bInfo: false, 
        bAutoWidth: false, 
        bDestroy: true, 
        "oLanguage": { 
         "sEmptyTable": "No Records Found" 
        }, 
        "sPaginationType": "full_numbers", 
        "bLengthChange": false, 
        "iDisplayLength": 5, 
        aaData: arrv, 
        aoColumns: [{ 
         sTitle: "Select", 
         orderable: false, 
         className: 'select-checkbox', 
         targets: 0 
        }, 
        { 
         sTitle: "Course name" 
        }, { 
         sTitle: "Level" 
        }, { 
         sTitle: "Study Mode" 
        }, { 
         sTitle: "Entry Year" 
        }, { 
         sTitle: "Point of Entry" 
        }, { 
         sTitle: "Awarding qualification" 
        }], 
        drawCallback: function() { 
         //Some function... 
        }, 
        select: { 
         style: 'os', 
         background: 'color:gray', 
         selector: 'td:first-child' 
        }, 
        order: [[1, 'asc']], 

       });