Home/ Questions/Q 3217232
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T15:23:14+00:00

I’m creating a simple jQuery editor, nothing complicated, and just can’t seem to find

  • 0

I’m creating a simple jQuery editor, nothing complicated, and just can’t seem to find out why the events do not work. See code below.

var $editor = $('<div>').addClass('editor')
      .insertBefore(this.$element)
      .append(this.$element);

var $b = $('<div>').addClass('button-wrapper')
       .appendTo($editor);
this.$element.css({height:this.opts.height,width:this.opts.width});
//Load up each button.
$.each(this.opts.buttons.split(' '), function(i, button)
{
 //If its an empty string keep going.
 if(button == '')return true;

 //Generate a button.
 $('<div>').data('buttonName', button)
     .addClass(button.toLowerCase())
     .click(clicked)
     .hover(hover, hover)
     .appendTo($b);
});

To go over it, simply, $element represents the textarea that I am using as the base element, $b represents the button wrapper, and $editor is the div to wrap around all of these things. When I append the buttons to $editor none of the events fire, however, when I append to document.body it works perfectly fine. For the record, the event clicked and hover are nothing special, just testers to see if the events are working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve rewritten your code a little bit, just to figure out what you’re doing. This seems to work for me, unless I didn’t understand what the problem is that you’re describing. The buttons react to hover as well as click events. Aside from writing the things you’re doing differently, there’s no substantial change in the code.

    I suppose there’s a chance that Val was right in that there may be other elements overlaying your buttons. You haven’t shown us your CSS, so it’s hard to tell what’s going on on your side.

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style>
            .bold, .italic, .underline{ width: 50px; height: 20px; background: green; margin: 10px; }
        </style>
    </head>
    <body>
    <textarea class="demo">
    </textarea>
    <script type="text/javascript">
            jQuery(
                function($)
                {
                    (function($){
                        //Constructor to make a new editor.
                        function TEditor(element, opts)
                        {
                            //Load in the element.
                            this.$element = $(element);
                            this.opts = opts;
                            //Let the browser know the object is ready.
                            this.enabled = true;
                        }

                        //The actual editor class.
                        TEditor.prototype = {
                            display: function()
                            {
                                var
                                    $editor = this.$element.wrap('<div class="editor" />').parent(),
                                    $b = $('<div class="button-wrapper" />').appendTo($editor);

                                this.$element.css({height:this.opts.height,width:this.opts.width});
                                //Load up each button.
                                $.each(this.opts.buttons.split(' '), function(i, button)
                                {
                                    //If its an empty string keep going.
                                    if(button == '') return true;

                                    //Generate a button.
                                    $('<div class="' + button.toLowerCase() + '" />')
                                        .data('buttonName', button)
                                        .appendTo($b)
                                        .click(clicked)
                                        .hover(hover, hover);
                                });
                            },
                            enable: function()
                            {
                                this.enabled = true;
                            },
                            disable: function()
                            {
                                this.enabled = false;
                            },
                            validate: function()
                            {
                                if(!this.$element[0].parentNode)
                                {
                                    this.destroy();
                                    this.$element = null;
                                    this.options = null;
                                }
                            }
                        }

                        //JQuery function extension.
                        $.fn.teditor = function(options)
                        {
                            options = $.extend({}, $.fn.teditor.defaults, options);

                            //On load create a new editor.
                            function get(ele)
                            {
                                var editor = $.data(ele, 'editor');
                                if(!editor)
                                {
                                    editor = new TEditor(ele, options);
                                    editor.display();

                                    $.data(ele, 'editor', editor);
                                }
                                return editor;
                            }

                            //Initialize.
                            this.each(function(){get(this);})
                            return this;
                        };

                        $.fn.teditor.defaults = {
                            buttons: 'Bold Italic Underline',
                            height: '150px',
                            width: '500px'
                        };

                        function clicked(e)
                        {
                            alert(e);
                        }
                        function hover(e)
                        {
                            console.log('hover');
                        }
                    })(jQuery);

                    $('.demo').teditor();
                }
            );
        </script>
    </body>
</html>
    • 0