jQuery事件未触发

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代表我用作基本元素的文本区域，$ 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 个解决方案

解决方案1
1 2010-10-02 19:01:59

解决方案2
0 已采纳 2010-10-02 20:01:58

jQuery事件未触发

问题描述

2 个解决方案

解决方案1 1 2010-10-02 19:01:59

解决方案2 0 已采纳 2010-10-02 20:01:58

解决方案1
1 2010-10-02 19:01:59

解决方案2
0 已采纳 2010-10-02 20:01:58