我的代码第一次正确执行，但是第二次却没有正确执行（Javascript）。 似乎变量未更新正确

Question

I am creating a jquery plugin. Whenever you double click on a tag that has class .editable it will replace it with either a textbox or a textarea. When you click outside of the .editable tag then it will write then it will remove the textbox or textarea and write the original content back.

The first time I do this it works as its supposed to. However, if I click on a different content field the second time when I click off it is replaced with the content of the editable area that I clicked on the first time.

To see what I'm talking about go to modx.harrishosting.com and doubleclick on home. Click on a different part of the webpage and it will return to normal. Now, doubleclick on the lerem ipsum content and click on a separate portion of the webpage. Instead of going back to normal the Lorem ipsum content is replaced with the home content.

Here is my code. Please help!

jQuery.fn.jqfEdit = function(){
    return this.each(function(){

        // Save "this" to "editable" because this changes when scope changes
        var editable = this;

        // Fix to display box-shaddow correctly when editable area is highlighted       
        $(editable).css({'display':'inline-block'});

        // Highlight editable area with box-shaddow on hover
        if (!($(editable).hasClass('.selected'))) {

            // What to do on mouse over
            $(editable).mouseenter(
                function() {
                    $(editable).css({'-moz-box-shadow' : '0px 0px 10px #eec900', '-webkit-box-shadow' : '0px 0px 10px #eec900', 'box-shadow' : '0px 0px 10px #eec900'});
                }

            // What to do on mouse out.
            ).mouseleave(
                function() {
                    $(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});
                }
            );
        }

        // Ending the if statement
        else {
        }

        // TO DO: Fix double/double click bug in textarea

        // What to do when double clicking an editable area
        $(editable).dblclick(function() {

            // Give the editable area the class "selected"
            $(editable).toggleClass('selected');

            // What to do if editable area is selected (has "selected" class)
            if ($(editable).hasClass('selected')) {

                // Remove the previously given highlight (box-shaddow) from the editable area
                $(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});


                // Take everything inside of editable div and assign it to variable named "content"
                var content = $(editable).html();

                // Get the height and width of editable div.
                var height = $(editable).height();
                var width = $(editable).width();

                // Add a few pixels to the width for textbox
                var textBoxHeight = height+5;
                var textBoxWidth = width+10;

                // If length of content is less than 50 characters then use a textbox
                if (content.length < 50) {
                    $('.selected').html('<form id="myForm"> <input id="jqfEdit-textbox" type="text" style="height:' + textBoxHeight + '; width:' + textBoxWidth + '; padding: 2px;" name="myname" value="' + content + '" /> <input type="submit" value="Ok" /> <input type="button" name="Cancel" value="Cancel" /> </form>');

                    // If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
                    if ($('#jqfEdit-textbox').focus()) {
                        $('body').click(function() {

                            if ($('.selected').html(content)) {
                                $('.selected').toggleClass('selected');
                            }

                        });
                        $(editable).click(function(event){

                            event.stopPropagation();

                        });

                    }

                }

                // If length of content is more than 50 characters then use a textarea
                else {
                    $('.selected').html('<form id="myForm"> <textarea id="jqfEdit-textarea" type="text" style="height:' + height + '; width:' + width + ';" name="myname">' + content + '</textarea> <input type="submit" value="Ok" /> <input type="button" name="Cancel" value="Cancel" /> </form>');

                    // If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
                    if ($('#jqfEdit-textarea').focus()) {
                        $('body').click(function() {

                            if ($('.selected').html(content)) {
                                $('.selected').toggleClass('selected');
                            }

                        });
                        $(editable).click(function(event){

                            event.stopPropagation();

                        });

                    }
                }             
            }
        });
    });

};

Answer 1

One possible reason is using specific values for some IDs of HTML you write. You may want to append the ID of editable to it or so. I haven't gone throughly enough to tell whether this is possibility of two forms at a time in the entire page (even if one hidden with CSS). If this happens, it won't work from there on.

This is not the only reason but one possible from very quick read of the code.

Answer 2

I haven't got time to debug it properly, but the two things that jump out at me as possible problems are:

The closure created here:

$('body').click(function() {
    if ($('.selected').html(content)) {
        $('.selected').toggleClass('selected');
    }
});

is using the variable content , which was defined outside of the closure, and could cause things to be leftover from the last time the function ran.

Also, be careful when adding events within events (the $('body').click line), you may end up with events that fire twice, which when combines with the point above could create the problem you are experiencing.