Why is this javascript inserting two spinner images?

Question

// javascript for ajax pagination//

document.observe("dom:loaded", function() {
  // the element in which we will observe all clicks and capture
  // ones originating from pagination links
  var container = $(document.body)

  if (container) {
    var img = new Image
    img.src = '/images/spinner.gif'

    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' })
    }

    container.observe('click', function(e) {
      var el = e.element()
      if (el.match('.pagination a')) {
        el.up('.pagination').insert(createSpinner())
        new Ajax.Request(el.href, { method: 'get' })
        e.stop()
      }
    })
 }
})

Why is this script inserting two spinner images?

here is the html

 <div style="margin-top:25px;">
      <div class="pagination ajax">
           <span class="disabled prev_page">&laquo; Previous</span> 
           <span class="current">1</span> 
           <a href="/posts?page=2" rel="next">2</a> 
           <a href="/posts?page=3">3</a> 
           <a href="/posts?page=2" class="next_page" rel="next">Next &raquo;</a>
      </div>
      <br style="clear:both;"/>
 </div>

Answer 1

Are there two elements with class=pagination?

Answer 2

try to do this changes :

// javascript for ajax pagination//

document.observe("dom:loaded", function() { // the element in which we will observe all clicks and capture // ones originating from pagination links var container = $(document.body)

if (container) { var img = new Image img.src = '/images/spinner.gif'

var createSpinner() = function { 
  return new Element('img', { src: img.src, 'class': 'spinner' });
}

container.observe('click', function(e) {
  var el = e.element()
  if (el.match('.pagination a')) {
    el.up('.pagination').insert(createSpinner);
    new Ajax.Request(el.href, { 
      method: 'get',
      success: function(){ el.up('.pagination').find('img.spinner').remove(); }
    });
    e.stop()
  }
});

} });

Answer 3

I ran the javascript through jslint and fixed all errors but new Ajax. I moved the createSpinner-function since it's not advisable to define it inside a block. Also the declaration of img was moved, semicolons added, and line-breaks to make the code more readable. (I have not tested the code, just "beautified" it)

document.observe(
  "dom:loaded",
  function() {
    var img;
    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' });
    }

    // the element in which we will observe all clicks and capture
    // ones originating from pagination links
    var container = $(document.body);

    if (container) {
      img = new Image( );
      img.src = '/images/spinner.gif';

      container.observe(
        'click',
        function(e) {
          var el = e.element();
          if (el.match('.pagination a')) {
            el.up('.pagination').insert(createSpinner());
            new Ajax.Request(el.href, { method: 'get' });
            e.stop();
          }
        }
      );
    }
  }
);