jQuery cambia contenuto di colorbox

Question

Ho provato già domande con titoli simliar, ma non funzionano. (Ad esempio: How to load AJAX content into current Colorbox window?)

ho la pagina principale: (compresi 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> 

Questo funziona bene, il contenuto (semplice) di 1.html viene caricato nella colorbox:

1.html:

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

Ora voglio cambiare il contenuto dal klicking sul link. Questo non funziona. Ether Ricevo una colorbox aggiuntiva o non succede nulla.

Grazie!

Answer 1

È possibile utilizzare una funzione jquery live() per controllare i clic sui collegamenti colorbox esistenti e futuri. Inoltre, ti consiglio di non utilizzare rel come selettore. Questo attributo è destinato all'uso in SEO. Quindi in questo esempio ho spostato il vostro selettore dalla attributo rel per l'attributo class:

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

     return false; 
    }); 
}); 

Poi basta fare in modo che tutto ciò che si desidera attivare il nuovo contenuto colorbox ha la classe "open_ajax" e un href . EG:

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

Aggiornamento per jQuery 1.7+

Per jQuery 1.7, dal momento che dal vivo() è stato deprecato, è necessario fare in questo modo:

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