'too much recursion' with image placement - jquery 1.4.2

We are running a group blog with a lot of users with different levels of experience. One constant irritation has been that users break the front page with images. Our solution to this is to search for excerpts with images, hide the .entry-summary div and remove the img tag from it, and build a new .entry-image div which uses the src attribute of the img to construct a vertically and horizontally centered CSS background image.

It began working perfectly, but as further features have been added to the site such as search and related post suggestions, we began to notice too much recursion (from line 50 of the minified jquery 1.4.2) errors which then break the site. I've added what I believed to be a relevant pattern (from "too much recursion" error in JQuery 1.3.2) but it continues to happen. (On top of that I am seeing e is null from line 55).

Below is the relevant code. I also use the event.special.load plugin, which may be causing headaches.

$('[id*=card] .entry-summary img').load(function() {
  var card = $(this).parents('[id^=card]');
  var url = $(this).attr('src');
  var dynHeight = 300 - $(card).find('.entry-title').outerHeight(true) - $(card).find('.entry-meta').outerHeight(true);

  $(card)
    .append("<div class='entry-image'></div>") // we need a new div to hold our image
    .find('.entry-image')
    .hide()
    .css({
      'background' : 'url(' + url + ') no-repeat center center',
        'background-size' : '100% auto',
        '-moz-background-size' : '100% auto',
        '-webkit-background-size': '100% auto',
        'width' : '200px',
        'height' : dynHeight  + 'px',
        'margin' : '0px',
        'padding' : '0px',
    });

  $(card).find('.entry-summary').hide();
  $(card).find('.entry-image').show();

  $(card).find('.entry-summary img').remove(); 
});

$(function() {
  $('[id*=card] .entry-image').parent().mouseenter( function(event) {
    event.stopPropagation();
    $(this).find('.entry-image').hide();
    $(this).find('.entry-summary').show();   
  }).mouseleave(function(event) {    
    event.stopPropagation();
    $(this).find('.entry-summary').hide();
    $(this).find('.entry-image').show();
  });
});

$(function() {
  $('[id*=card] .entry-summary').click(function(event) {
    event.stopPropagation();
    var postUrl = $(this).siblings('.entry-title').find('a').attr('href');
    window.location = postUrl;
  });
});

I am not 100% sure of the issue you're describing, but I do see some extreme inefficiencies in your code which may be contributing. You continue to re-query for the same things over and over rather than query once and store it, then operate off that stored object moving forward. I wonder if this constant re-querying is leading to the recursion...

Try this:

$( '[id*=card] .entry-summary img' ).load( function()
{
    var $this, card, url, dynHeight;

    $this = $( this );
    card = $this.parents( '[id^=card]' );
    url = $this.attr( 'src' );
    dynHeight = 300 - card.find( '.entry-title' ).outerHeight( true ) - card.find( '.entry-meta' ).outerHeight( true );

    card
        .append( '<div class="entry-image"></div>' ) // we need a new div to hold our image
        .find( '.entry-image' )
            .hide()
            .css( {
                "background" : 'url( "' + url + ' ") no-repeat center center',
                "background-size" : '100% auto',
                "-moz-background-size" : '100% auto',
                "-webkit-background-size": '100% auto',
                "width" : '200px',
                "height" : dynHeight  + 'px',
                "margin" : '0px',
                "padding" : '0px',
            } ).
            .show();

    card.find( '.entry-summary' ).hide();
    $this.remove();
} );

$( function()
{
    $( '[id*=card] .entry-image' )
        .parent()
            .mouseenter( function( event )
            {
                var $this = $( this );
                event.stopPropagation();

                $this
                    .find( '.entry-image' )
                        .hide()
                        .end()
                    .find('.entry-summary')
                        .show();   
            } )
            .mouseleave( function( event )
            {
                var $this = $( this );
                event.stopPropagation();
                $this
                    .find( '.entry-summary' )
                        .hide()
                        .end()
                    .find( '.entry-image' )
                        .show();
            } );
} );

$( function()
{
  $( '[id*=card] .entry-summary' )
    .click( function( event )
    {
        event.stopPropagation();
        window.location = $( this )
            .siblings( '.entry-title' )
                .find( 'a' )
                    .attr( 'href' );
  } );
} );