Nội dung thay đổi jQuery của hộp màu

Question

Tôi đã thử các câu hỏi với tiêu đề simliar, nhưng chúng không hoạt động. (Ví dụ: How to load AJAX content into current Colorbox window?)

Tôi có trang chính: (bao gồm jQuery 1.6.1)

<script type="text/javascript" src="js/jquery.colorbox.js"></script> 
<link rel="stylesheet" type="text/css" href="css/colorbox.css" /> 
<script> 
jQuery(function(){ 
    $("#aLink").colorbox(); 
    $('#blub a[rel="open_ajax"]').live('click', function(e){ 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      cache: false, 
      beforeSend: function() { 
       //$('#cboxContent').empty(); 
       $('#cboxLoadedContent').empty(); 
       $('#cboxLoadingGraphic').show(); 
      }, 
      complete: function() { 
       $('#cboxLoadingGraphic').hide(); 
      }, 
      success: function(data) { 
       $('#cboxLoadedContent').append(data); 

      } 
     }); 
    }); 
    }); 
</script> 
<a href="1.html" id="aLink">colorbox open</a> 

này hoạt động tốt, các (đơn giản) nội dung của 1.html được nạp trong hộp thuốc vẽ:

1.html:

<div id="blub"> 
    <a rel="open_ajax" href="2.html">Change Content</a> 
</div> 

Bây giờ tôi muốn thay đổi nội dung bởi klicking vào liên kết. Điều này không hoạt động. Ether Tôi nhận được một hộp màu bổ sung hoặc không có gì xảy ra.

Thanx!

Answer 1

Bạn có thể sử dụng hàm jquery live() để xem các lần nhấp vào các liên kết hộp màu hiện tại và trong tương lai. Ngoài ra, tôi khuyên bạn không nên sử dụng rel làm công cụ chọn của mình. Thuộc tính đó được thiết kế để sử dụng trong SEO. Vì vậy, trong ví dụ này tôi đã chuyển chọn của bạn từ các thuộc tính rel vào thuộc tính lớp:

$(document).ready(function() { 
    $('a.open_ajax').live('click', function(){ 
     $.colorbox({ 
      open:true, 
      href: this.href 
      //plus any other interesting options  
     }); 

     return false; 
    }); 
}); 

Sau đó, chỉ cần đảm bảo rằng bất cứ điều gì mà bạn muốn kích hoạt các nội dung hộp thuốc vẽ mới có lớp "open_ajax" và một href . EG:

<a class="open_ajax" href="colorboxPage.html">Open</a>

Cập nhật cho jQuery 1.7+

Đối với jQuery 1.7, kể từ live() đã bị phản, bạn sẽ cần phải làm điều đó theo cách này:

$(document).on("click", "a.open_ajax", function() { 
    //everything that was in the live() callback above 
});