Javascript 让jQuery插件展示jQuery'；关于质量的问题
我刚刚创建了一个jQuery插件，它将工具提示应用于所选元素。要将其应用于类“myElement”的所有元素，只需使用以下脚本：Javascript 让jQuery插件展示jQuery'；关于质量的问题,javascript,jquery,Javascript,Jquery,我刚刚创建了一个jQuery插件，它将工具提示应用于所选元素。要将其应用于类“myElement”的所有元素，只需使用以下脚本：$（'.myElement'）.toolTip（） 在我想添加另一个元素之前，一切都很好。新添加的元素从未应用过插件，因此它显然没有工具提示。是的，我知道我可以在添加新添加的元素后将工具提示应用于该元素，但我不希望用户需要这样做 如何让我的jQuery插件展示jQuery的on（）质量？我可以修改插件或者改变我应用插件的方式。至于我所说的on（）quality，类似于$
$（'.myElement'）.toolTip（）
在我想添加另一个元素之前，一切都很好。新添加的元素从未应用过插件，因此它显然没有工具提示。是的，我知道我可以在添加新添加的元素后将工具提示应用于该元素，但我不希望用户需要这样做
如何让我的jQuery插件展示jQuery的on（）
质量？我可以修改插件或者改变我应用插件的方式。至于我所说的on（）
quality，类似于$（'#myDiv'）。on（'click'，'p.myElement'，function（）{alert（'Hello'）；}）
，但我不想强迫用户总是需要在相关元素周围放置某种类型的#myDiv
包装
同样，现场演示正在进行，下面复制了脚本
<!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>
截图
.myElement{边距：100px；}
.toolToolActive{颜色：蓝色；}
myTooTip先生{
边框：1px实心#CECECE；
背景：白色；
填充：10px；
显示：无；
颜色：黑色；
字体大小：11px；-moz边框半径：4px；
盒影：3px 1px 6px#505050；
-khtml边界半径：4px；
-webkit边界半径：4px；
边界半径：4px；
}
（函数（$）{
var默认值={
'class'：''，//要添加到工具提示的Css类（以及标准工具提示）。
“mouseMove”：true，//指示是否使用鼠标移动工具提示的标志。
'speed'：'fast'，//在工具提示中淡入的速度。
“延迟”：250，//打开弹出窗口前的延迟（毫秒）。
“xOffset”：20，
“yOffset”：10
};
var方法={
初始化：函数（选项）{
//使用提供的任何选项扩展的默认值创建设置。
var设置=$.extend（默认值，选项| |{}）；
返回此。每个（函数（）{
var标题，
timeoutID，
$t，
工具提示；
//将当前元素的内容包装到范围中。
$t=$（this.wrapInner（“”）；
$t.children（'span'）。悬停（函数（e）{
if（！$t.hasClass（'toolToolActive'））{
标题=$t.attr（‘标题’）；
$t.attr（'title'，''）；//删除标题，使其不会在悬停时显示。
timeoutID=window.setTimeout（函数（）{
//创建一个div作为工具提示弹出窗口，添加样式以及
//将html（从显示函数）转换为html，然后淡入元素
//使用设置中指定的速度。
工具提示=$（“”）
.addClass（'standardToolTip'+设置['class']））
.html（标题）
.css（'top'，（e.pageY-settings.yOffset）+'px'）
.css（'left'，（e.pageX+settings.xOffset）+'px'）
.css（'位置'，'绝对'）
.appendTo（'正文'）
.fadeIn（设置.速度）；
$t.addClass（'toolToolActive'）；
}，设置。延迟）；
}
},
函数（）{
clearTimeout（timeoutID）；
$t.attr（“头衔”，头衔）；
如果（$t.hasClass（'toolToolActive'））{
工具提示。删除（）；
$t.removeClass（'toolToolActive'）；
}
});
$t.mousemove（函数（e）{
if（settings.mouseMove&&$t.hasClass（'toolToolActive'））{
css（'top'，（e.pageY-settings.yOffset）+'px'）
.css（'left'，（e.pageX+settings.xOffset）+'px'）；
}
});
});
},
销毁：函数（）{
返回此。每个（函数（）{
var$e=$（本）；
$e.html（$e.children（'span'）.html（））；
});
}
};
$.fn.toolTip=函数（方法）{
if（方法[方法]）{
返回方法[method].apply（this，Array.prototype.slice.call（arguments，1））；
}else if（typeof方法=='object'| |！方法）{
return methods.init.apply（这是参数）；
}否则{
$.error（'Method'+Method+'在jQuery.toolTip上不存在'）；
}
};
}（jQuery））；
$（函数（）{
$（'.myElement'）。工具提示({
“类”：“myTooTip”
});
$（'.add'）。单击（function（）{$（'#myDiv'）。追加（'New Doe
'）；）；
});
约翰·多伊的数据id=“1”title=“弹出窗口”>约翰·多伊
Jane Doe的数据id=“2”title=“弹出窗口”>Jane Doe
婴儿Doe的数据id=“3”title=“弹出窗口”>婴儿Doe
添加
函数.on（）
利用浏览器自然产生的事件冒泡行为。您可以利用修改DOM时生成的事件，就像@Pointy一样。请详细说明。用简单的英语..on（）函数实际上只监视所有单击（或ot）