選択した要素にツールチップを適用するjQuery プラグインhttp://jsbin.com/aCoboQo/2を作成しました。クラス「myElement」のすべての要素に適用するには、次のスクリプトを使用するだけです。$('.myElement').toolTip();
別の要素を追加するまでは、すべて問題ありません。新しく追加された要素にはプラグインが適用されていないため、明らかにツールチップはありません。はい、追加後に新しく追加された要素にツールチップを適用できることはわかっていますが、ユーザーに必要とさせたくありません。
on()jQuery プラグインが jQuery の品質を発揮するようにするにはどうすればよいですか? プラグインを変更するか、プラグインの適用方法を変更しても問題ありません。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>