jQueryのカラーボックスの内容を変更

Question

私はすでにsimliarタイトルで質問しましたが、うまくいきません。 （例：How to load AJAX content into current Colorbox window?）

私はメインページを持っている：

<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の（簡単な）コンテンツがカラーボックスにロードされている（jQueryの1.6.1を含みます）：

1.html：

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

は、今私がリンクをklickingにより内容を変更したいです。これは機能しません。 Ether追加のカラーボックスが表示される、または何も起こりません。

Thanx！

Answer 1

jquery live（）関数を使用して、既存および今後のカラーボックスリンクのクリックを監視することができます。また、セレクタとして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 
});