Question

I’m working on an interactive web application, currently set up on http://picselbocs.com/projects/goalcandy (user: [e-mail], password: demo). It allows you to drag items from the left column onto the workspace on the right and resize/edit them, among other things.

Today I’ve been working on the objects’ text editing feature and have come across some very odd behavior that I can’t find the source of. If you first click on a text field within a newly created object (to edit that text) and then click outside the textbox, an alert message is triggered (I used this for testing purposes only). The problem is that if you click within the same text field again and then outside it, the alert triggers more and more times.
In short, the event handler for the “blur” event fires more and more times, with each new text editing attempt. Why is that? What am I missing?
I’m not all that experienced with Firebug or Chrome’s debugging module, at least not with the more subtle features that could help me in this case (I assume so), and I can’t find the source of the problem. But

The other weird issue mentioned in the title is that clicking on the object’s image, if the object has both text and an image, doesn’t trigger the alert… Otherwise said, the event handler for “blur” does not fire at all unless you click anything else besides the object image. Any idea why that happens?

Here’s the code (using jquery) that embodies the “blur” event handler:

var jqSelector = "#mesh div.mesh-obj span";
        $(document)
            .on("mouseover mouseenter", jqSelector, function(event) { 
                event.stopPropagation();
                $(this).css({'background-color':'#FF9', 'cursor':'text'});
            })
            .on("mouseout mouseleave", jqSelector, function(event) { 
                event.stopPropagation();
                $(this).css({'background-color':'transparent', 'cursor':'inherit'});
            })
            .on("mousedown", jqSelector, function(event) { 
                event.stopPropagation();    // prevent activating the parent object's "mousedown/click" event handlers
            })
            .on("click", jqSelector, function(event) { 
                event.stopPropagation();    // prevent activating the parent object's "mousedown/click" event handlers

                //alert('click');

                // Cache jQuery objects
                var jqSpan = $(this),
                    jqPre  = jqSpan.parent(),
                    jqTextarea = jqPre.parent().find('textarea').first();

                // "Replace" the <pre> element with the <textarea>
                jqPre.css('visibility','hidden');
                jqTextarea
                    .show()
                    .text(jqSpan.text())
                    .val(jqSpan.text())
                    .css('background-color','#ff9')
                    .on('click mousedown dblclick', function(event){ event.stopPropagation(); })
                    .on('blur', function(event){
                        event.stopPropagation();
                        // Hide the <textarea> element and make the <pre> visible again
                        jqSpan.text(jqTextarea.val());
                        jqTextarea.hide();
                        jqPre.css('visibility','visible');
                        alert('blur');
                        //jqTextarea.off('blur');
                    })
                    .focus();
            });

Please aid! Thanks.

Answer 1

You’re re-adding the blur event every time you click on the text area. That doesn’t override the old one, it adds a new one.