Question

I’m trying to post-process content that is added to the DOM via the excellent SyntaxHighlighter project.

When SH formats text, it generates a bunch of HTML and then writes that HTML into the DOM. It creates a div with class "syntaxhighlighter".

I want to listen for the insertion of these new divs, and when they are inserted, I want to manipulate some of the html and then overwrite the html in the DOM with this new html.

My problem is that when I write this new html back to the DOM, it re-triggers the event that fires my handler in the first place, and thus I get stuck in browser-killing recursion.

Here’s what I have so far:

$('div.syntaxhighlighter').live('DOMNodeInserted', function(event){
        //console.log(event);
        var input = event.target.innerHTML;
        var newInput = input.replace(/(dbo\..*?)(\(|\s)/ig,"<a href='?obj=$1'>$1</a>$2");
        $(event.target).unbind();
        event.stopPropagation();
        $(event.target).html(newInput);
        return false;
    });

Neither the unbind nor the stopPropagation nor the return false will get the behavior I want. I think I understand why, but I do not know how to stop it (my jQuery-foo is weak, I’m afraid)

Answer 1

Can you do something like..

if ( !$(this).data('writing') ) {

    $(this).data('writing', 1);

    // your function call that makes it invoke itself

    $(this).data('writing', 0 );

}