chú giải công cụ trong bootstrap không hoạt động sau ajax

Question

Tôi có một tệp có tên index.php, trong đó bao gồm một tệp khác có tên là file1.php (trong index.php tôi bao gồm tất cả các tệp cần thiết cho jQuery, js, v.v.). Trong file1.php Tôi có một bảng với các nút mà mỗi cái mở ra một phương thức. thông tin trong phương thức là từ một cuộc gọi ajax cho file2.php. trong file2.php tôi tạo một bảng. Trong bảng tôi có ô:

<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button> 

và, chú giải công cụ không hoạt động. nhưng, khi tôi sao chép này và nhận được nó vào file1.php, dưới bảng, tooltip không hoạt động.

Có ai có thể giúp tôi sửa chữa chú giải công cụ không? Thx.

Answer 1

Tôi nghĩ bạn cần phải khởi chạy chú giải công cụ trên dữ liệu mới đến, ví dụ:

$('[data-toggle="tooltip"]').tooltip(); 

Đặt mã này vào trình xử lý thành công AJAX của bạn, sau thao tác DOM.

Answer 2

tôi thiết lập mẹo công cụ của tôi bằng cách sắp xếp như vậy:

function setUpToolTipHelpers() { 
    $(".tip-top").tooltip({ 
     placement: 'top' 
    }); 
    $(".tip-right").tooltip({ 
     placement: 'right' 
    }); 
    $(".tip-bottom").tooltip({ 
     placement: 'bottom' 
    }); 
    $(".tip-left").tooltip({ 
     placement: 'left' 
    }); 
} 

khởi tạo này với một tài liệu gọi sẵn sàng:

$(document).ready(function() { 
     setUpToolTipHelpers(); 
    }); 

Bằng cách này tôi có thể xác định vị trí của mũi công cụ, và Tôi chỉ phải chỉ định mẹo bằng cách sử dụng một lớp và tiêu đề:

<td class = "tip-top", title = "Some description">name</td> 

Sau đó tôi gọi, "setU pToolTipHelpers() "bên trong hàm ajax thành công của tôi. Hoặc bạn có thể gọi nó trên chức năng hoàn chỉnh là tốt. Điều này dường như làm việc tốt cho tôi.