How would I stop a live jquery event handler from firing more than once?

Question

Greetings.

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)

Thanks for suggestions.

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 );

}

Answer 2

did you try delegate (needed for inserted DOM element) together with the one method's,

after all the one method is specially created just for preventing anything from firing more than once?