Question

我刚创建了一个jQuery插件http://jsbin.com/aCoboQo/2，它将工具提示应用于所选元素。要将它应用于“myElement”类的所有元素，只需使用以下脚本：$('.myElement').toolTip();

一切都很好，直到我想添加另一个元素。新添加的元素从未将插件应用于它，因此显然没有工具提示。是的，我知道我可以在添加后将工具提示应用于新添加的元素，但我宁愿不让用户需要。

如何让我的jQuery插件展示jQuery的on()质量？我可以修改插件或改变插入方式。至于我对on()质量的意义，类似于$('#myDiv').on('click','p.myElement',function(){alert('Hello');});，但我不想强迫用户始终需要在元素周围放置某种#myDiv包装器。问题

同样，现场演示位于http://jsbin.com/aCoboQo/2，脚本在下面重复。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>screenshot</title>  
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <style type="text/css">

            .myElement{margin:100px;}
            .toolToolActive{color:blue;}

            .myTooTip {
                border:1px solid #CECECE;
                background:white;
                padding:10px;
                display:none;
                color:black;
                font-size:11px;-moz-border-radius:4px;
                box-shadow: 3px 1px 6px #505050;
                -khtml-border-radius:4px;
                -webkit-border-radius:4px;
                border-radius:4px;
            }
        </style> 

        <script type="text/javascript">
(function($){
    var defaults = {
        'class'    : '', // Css class(es) to add to tooltip (along with standardToolTip).
        'mouseMove': true, // A flag indicating whether to move tooltip with mouse.
        'speed'    : 'fast', // The speed at which to fade in the tool tip.
        'delay'    : 250, // Delay (in ms) before opening the popup.
        'xOffset'  : 20,
        'yOffset'  : 10
    };

    var methods = {
        init : function (options) {
            // Create settings using the defaults extended with any options provided.
            var settings = $.extend(defaults, options  || {});

            return this.each(function () {
                var title,
                timeoutID,
                $t,
                toolTip;

                // Wrap the content of the current element in a span.
                $t = $(this).wrapInner('<span />');

                $t.children('span').hover(function(e) {
                    if(!$t.hasClass('toolToolActive')) {
                        title = $t.attr('title');
                        $t.attr('title','');  // Remove the title so that it doesn't show on hover.

                        timeoutID = window.setTimeout(function () {
                            // Create a div to be the tooltip pop up, add the styling as well as
                            // the html (from the display function) to it and then fade the element in
                            // using the speed specified in the settings.
                            toolTip = $('<div />')
                            .addClass('standardToolTip ' + settings['class'])
                            .html(title)
                            .css('top', (e.pageY - settings.yOffset) + 'px')
                            .css('left', (e.pageX + settings.xOffset) + 'px')
                            .css('position', 'absolute')
                            .appendTo('body')
                            .fadeIn(settings.speed);

                            $t.addClass('toolToolActive');

                            }, settings.delay);
                    }
                    },
                    function () {
                        window.clearTimeout(timeoutID);
                        $t.attr('title', title);

                        if ($t.hasClass('toolToolActive')) {
                            toolTip.remove();
                            $t.removeClass('toolToolActive');
                        }
                });

                $t.mousemove(function (e) {
                    if (settings.mouseMove && $t.hasClass('toolToolActive')) {
                        toolTip.css('top', (e.pageY - settings.yOffset) + 'px')
                        .css('left', (e.pageX + settings.xOffset) + 'px');
                    }
                });
            });
        },
        destroy : function () {
            return this.each(function () {
                var $e = $(this);
                $e.html($e.children('span').html());
            });
        }
    };

    $.fn.toolTip = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || ! method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.toolTip');
        }    
    };
    }(jQuery));
          $(function(){
                $('.myElement').toolTip({
                    'class':'myTooTip'
                });
                 $('.add').click(function(){$('#myDiv').append('<p class="myElement" data-id="4" title="Popup for New Doe">New Doe</p>');});
            });
        </script>
    </head>

    <body>
        <div id="myDiv">
          <p class="myElement" data-id="1" title="Popup for John Doe">John Doe</p>
        <p class="myElement" data-id="2" title="Popup for Jane Doe">Jane Doe</p>
        <p class="myElement" data-id="3" title="Popup for Baby Doe">Baby Doe</p>
      </div>
        <p class="add">Add</p>
    </body> 
</html>

制作jQuery插件展示了jQuery的on（）质量

0 个答案: