gistfile1.js

// Invoke annonymous function on domready event.
$(function(){

  // Declare page index to get via ajax request.
  // This value will be incremented later.
  var page = 2;

  // Base URL to request.
  // such as:
  // http://www.kobedenshi.ac.jp/?tag=update&page=2
  // http://www.kobedenshi.ac.jp/?tag=update&page=3
  // http://www.kobedenshi.ac.jp/?tag=update&page=4
  //
  // May be you should modify this variable for testing
  // such as: var url = 'http://www.clisk.com/demo/kobe/ajax_mock.html?page='
  var url = location.href + '/?tag=update&page=';
  
  // Register onClick event handler for matching elements of the selector `.more`
  $('.more').click(function(){

    // Below code will be executed when `.more` element is clicked.

    // append loading gif to $('#updates') element.
    $('#updates').append($('<div class="loading"><img src="' + location.href + '/wp-content/themes/kobedenshi-top/images/loading.gif" /></div>'));

    // Execute ajax request
    $.ajax({
      url: url + page, // 'http://www.kobedenshi.ac.jp/?tag=update&page=' + '2'
      dataType: 'html',
      success: function(html /* this variable `html` contains resulting HTML of ajax request */){
        // when ajax was successfull
        
        // remove loading gif
        $('#updates .loading').remove();
        
        // append resulting HTML to $('#updates') element
        $('#updates').append(html);
        
        // increment `page` variable to get next page.
        page++;
      },
      complete: function(){
        // regardless of whether or not ajax was successfull
        
        // remove loading gif
        $('#updates .loading').remove();
        
        // init colorbox jQuery plugin for newly loaded contents.
        $(".youtube .thumbnail a").colorbox({iframe:true, innerWidth:425, innerHeight:344});
      }
    });
  });
});