jQuery own plugin help - refer to wrong element

Question

I have written a plugin that looks like this so far:

(function($) {

    var textarea;

    $.fn.bbcode = function(opt) 
    {
        var i = 0;

        return this.each(function(i) {

            textarea = this;

            var strHTML = '<div id="editor" class="editor-instance-' + i + '">';
            strHTML += '<div class="btn bold" title="Bold"></div>';
            strHTML += '<div class="btn italic" title="Italic"></div>';
            strHTML += '<div class="btn underline" title="Underline"></div>';
            strHTML += '<div class="btn link" title="Link"></div>';
            strHTML += '<div class="btn quote" title="Quote"></div>';
            strHTML += '</div>';

            $(strHTML).prependTo($(this).parent().parent());

            $('div.editor-instance-' + i + ' div').live('click', function(){
                var type = $(this).attr('class').substr(4);

                switch (type) {
                    case 'bold':
                        simpleReplace('b');
                        break;
                }
            });

        });
    };


    function simpleReplace(wrapper) {
        $(textarea).val(wrapper);
    }

})(jQuery);

I call this plugin on 2 textarea's like this:

$(document).ready(function(){
    $('.form_add_comment textarea, .form_reply_comment textarea').bbcode({
        start: true
    });

});

The problem I am having is that clicking on bold which calls simpleReplace() is only setting the value of the 2nd textarea to 'b' despite when I click on the first one.

I think the textarea variable is being overwritten the second time it loops so I probably have my functions in the wrong place.

Any help would be great!

Answer 1

You are right, textarea is overwritten. A solution would be to pass the current textarea to the function:

$('div.editor-instance-' + i + ' div').live('click', {textarea: this}, function(e){
     var type = $(this).attr('class').substr(4);

     switch (type) {
         case 'bold':
            simpleReplace(e.data.textarea, 'b');
            break;
     }
});

Note that the current textarea is passed to the event handler via the event data option.

Then:

function simpleReplace(element, wrapper) {
    $(element).val(wrapper);
}

---

Of course you could also put the simpleReplace function inside the for loop. This way, every textarea gets its "own" simpleReplace function. But this will also increase the memory footprint.