Question

我正在创建一个简单的jQuery编辑器，没什么复杂的，而且似乎无法找出事件不起作用的原因。请参阅下面的代码。

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

简单来说，$ element代表我用作基本元素的textarea，$ b代表按钮包装器，$ editor是包含所有这些东西的div。当我将按钮附加到$ editor时，没有任何事件触发，但是，当我附加到document.body时它完全正常。对于记录，点击和悬停的事件没什么特别的，只是测试人员看看事件是否有效。

Answer 1

我想问题实际上是在您使用<div>的所有地方，但它应该只是div

如下所示 -

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

Answer 2

我已经重写了一点代码，只是为了弄清楚你在做什么。这似乎对我有用，除非我不明白你所描述的问题是什么。按钮会对悬停以及单击事件做出反应。除了以不同方式编写您正在做的事情之外，代码中没有实质性的变化。

我认为Val是正确的，因为可能有其他元素覆盖你的按钮。你还没有向我们展示你的CSS，所以很难说出你身边发生了什么。

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

jQuery事件没有触发

2 个答案: