Fatal编程技术网

Javascript jQuery事件未触发

javascript jquery

Javascript jQuery事件未触发,javascript,jquery,Javascript,Jquery,我正在创建一个简单的jQuery编辑器，并不复杂，只是似乎无法找出事件不起作用的原因。请参阅下面的代码 var $editor = $('<div>').addClass('editor') .insertBefore(this.$element) .append(this.$element); var $b = $('<div>').addClass('button-wrapper') .appendTo($editor); th

我正在创建一个简单的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);
});

var$editor=$（''）.addClass（'editor'））
.insertBefore（此.$元素）
.append（此.$元素）；
变量$b=$（''）.addClass（'按钮包装器'）
.appendTo（$编辑）；
this.$element.css（{height:this.opts.height，width:this.opts.width}）；
//加载每个按钮。
$.each（this.opts.buttons.split（“”），function（i，button）
{
//如果是空字符串，请继续。
如果（按钮=''）返回true；
//生成一个按钮。
$（''）.data（'buttonName'，button）
.addClass（button.toLowerCase（））
。单击（已单击）
.悬停（悬停，悬停）
.附件（b美元）；
});
简单地说，$element表示我用作基本元素的textarea，$b表示按钮包装器，$editor是包装所有这些内容的div。当我将按钮附加到$editor时，不会触发任何事件，但是，当我附加到document.body时，它工作得非常好。记录在案，事件单击和悬停没有什么特别的，只是测试人员看看事件是否正常工作。

我想问题实际上存在于您使用的所有位置
，但应该是
div

如下-

var $editor = $('div').addClass('editor')
      .insertBefore(this.$element)
      .append(this.$element);
我已经重写了你的代码，只是为了弄清楚你在做什么。这似乎对我有用，除非我不明白你所描述的问题是什么。按钮对悬停和单击事件作出反应。除了编写不同的代码外，代码中没有实质性的变化

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


.bold、.italic、.underline{宽度：50px；高度：20px；背景：绿色；边距：10px；}
jQuery(
函数（$）
{
（函数（$）{
//构造函数来创建新编辑器。
功能TEditor（元素，选项）
{
//在元素中加载。
此.$element=$（element）；
this.opts=opts；
//让浏览器知道对象已准备就绪。
this.enabled=true；
}
//实际的编辑器类。
TEditor.prototype={
显示：函数（）
{
变量
$editor=this.$element.wrap（“”）.parent（），
$b=$（''）.appendTo（$editor）；
this.$element.css（{height:this.opts.height，width:this.opts.width}）；
//加载每个按钮。
$.each（this.opts.buttons.split（“”），function（i，button）
{
//如果是空字符串，请继续。
如果（按钮=''）返回true；
//生成一个按钮。
$('')
.data（'按钮名称'，按钮）
.附件（b美元）
。单击（已单击）
.悬停（悬停，悬停）；
});
},
启用：函数（）
{
this.enabled=true；
},
禁用：函数（）
{
this.enabled=false；
},
验证：函数（）
{
如果（！this.$element[0].parentNode）
{
这个。销毁（）；
此.$element=null；
this.options=null；
}
}
}
//JQuery函数扩展。
$.fn.teditor=函数（选项）
{
options=$.extend（{}，$.fn.teditor.defaults，options）；
//加载时创建一个新编辑器。
函数get（ele）
{
变量编辑器=$.data（ele，'editor'）；
如果（！编辑器）
{
编辑器=新的TEditor（ele，选项）；
editor.display（）；
$.data（ele，'editor'，editor）；
}
返回编辑器；
}
//初始化。
this.each（函数（）{get（this）；}）
归还这个；
};
$.fn.teditor.defaults={
按钮：“粗体斜体下划线”，
高度：'150px'，
宽度：“500px”
};
函数（e）
{
警报（e）；
}
函数悬停（e）
{
console.log（'hover'）；
}
})（jQuery）；