jQuery更改colorbox的內容

我試過已經有類似simliar標題的問題，但它們不起作用。（例如：How to load AJAX content into current Colorbox window?）jQuery更改colorbox的內容

我的主網頁（包括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>

這工作得很好，1.HTML的（簡單）的內容加載在顏色框：

1.HTML：

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

現在我想地單擊該鏈接，就可以改變的內容。這不起作用。以太我得到一個額外的彩盒，或什麼都沒有發生。

Thanx！

來源

2011-10-10 saromba

你的意思是說，當彩盒打開（來自1.html的內容）時，它有鏈接到2.html？所以基本上，你想要一個在colorbox中的鏈接來改變colorbox的內容..是對的嗎？ – Donamite

1.html的內容加載到colorbox中。那裏有「更改內容」鏈接。我點擊鏈接...現在我希望2.html的內容將被加載到現有的colorbox – saromba

你可以使用jquery live（）函數來觀察點擊現有和未來的colorbox鏈接。另外，我建議你不要使用rel作爲你的選擇器。該屬性旨在用於SEO。因此，在這個例子中，我從rel屬性感動你選擇的類屬性：

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

     return false; 
    }); 
});

然後，只需確保您要引發新的顏色框的內容任何有「open_ajax」級和一個href 。 EG：

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

更新的jQuery 1.7+

的jQuery 1.7，自住（）已被棄用，你需要做的是這樣的：

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

來源

2011-10-10 20:17:38 Donamite

嗨，這是行不通的。現在2.html的內容在第二個colorbox中（第一個的後面） – saromba

是的，我會用我使用的完整代碼進行更新。它不會打開一個新的colorbox，但會將內容加載到它中，然後調整現有的colorbox大小。 – Donamite

非常感謝。這工作。 – saromba

jQuery更改colorbox的內容

回答

相關問題