Javascript 在动态内容的动态元素上使用相同的tooltipster工具提示
我非常喜欢tooltipster,但我现在有个问题: 我将生成一个项目的动态列表,每个项目上都应该有一个工具提示。这个工具提示的内容应该是动态的,带有一个ID,我通过工具提示发送到工具提示内的页面。 但可以肯定的是,在我当前的代码中,我只是从列表的最后一个ID获取每个工具提示中的动态内容。因此,我不知道如何使用tooltipster并为每个列表项发送提示中动态内容的正确ID 这是我的密码: 列表项的名称: 所以,我只需要帮助,找到从PHP列表项发送正确ID到tooltipster的方法,而不是最后一个ID PS:您可以在截图图像中看到,内容始终是列表的最后一个内容,而不是不同的内容Javascript 在动态内容的动态元素上使用相同的tooltipster工具提示,javascript,php,jquery,tooltipster,Javascript,Php,Jquery,Tooltipster,我非常喜欢tooltipster,但我现在有个问题: 我将生成一个项目的动态列表,每个项目上都应该有一个工具提示。这个工具提示的内容应该是动态的,带有一个ID,我通过工具提示发送到工具提示内的页面。 但可以肯定的是,在我当前的代码中,我只是从列表的最后一个ID获取每个工具提示中的动态内容。因此,我不知道如何使用tooltipster并为每个列表项发送提示中动态内容的正确ID 这是我的密码: 列表项的名称: 所以,我只需要帮助,找到从PHP列表项发送正确ID到tooltipster的方法,而不是最
在tooltipster的支持下,我自己找到了解决方案: PHP: 谢谢你,也许它也能帮助别人!:)
<script type="text/javascript">
<?php
$NoteRelativeNoteIDphpVar = $FMID;
echo "var NoteRelativeNoteIDphpVariable = 'FMRelativeID={$NoteRelativeNoteIDphpVar}';";
?>
</script>
<div id="relative<?=$RID?>" class="relativeitem">
<div id="relativeitemrelative"><?=$FMRELATIVE?></div>
<div id="relativeitemname"><?=$FMNAME?></div>
<div id="relativeitemnote"><div id="iconnamenoterelative" class="FMRelativeNote" title="LoadRelativeNote"><img src="img/icon-note.png" class="iconnamenoterelativeimg" /></div></div>
<div id="relativeitemedit"><div id="iconeditrelative" style="background-color:<?=$CATCOL?>;"><a href="forms/Achgrelative.php?aid=<?=$RID?>" title="EDIT RELATIVE OF '<?=strtoupper($ANAME)?>'" class="box"><img src="img/icon-edit.png" class="iconrelativeimg" /></a></div></div>
</div>
<script type="text/javascript">
var NoteRelativeNoteIDphpVariable = 'FMRelativeID=23';</script>
<div id="relative1" class="relativeitem">
<div id="relativeitemrelative">Father</div>
<div id="relativeitemname">Louis</div>
<div id="relativeitemnote"><div id="iconnamenoterelative" class="FMRelativeNote" title="LoadRelativeNote"><img src="img/icon-note.png" class="iconnamenoterelativeimg" /></div></div>
<div id="relativeitemedit"><div id="iconeditrelative" style="background-color:#247ac2;"><a href="forms/Achgrelative.php?aid=1" title="EDIT RELATIVE OF 'POLLY'" class="box"><img src="img/icon-edit.png" class="iconrelativeimg" /></a></div></div>
</div>
<script type="text/javascript">
var NoteRelativeNoteIDphpVariable = 'FMRelativeID=21';</script>
<div id="relative2" class="relativeitem">
<div id="relativeitemrelative">Sister</div>
<div id="relativeitemname">Twinny</div>
<div id="relativeitemnote"><div id="iconnamenoterelative" class="FMRelativeNote" title="LoadRelativeNote"><img src="img/icon-note.png" class="iconnamenoterelativeimg" /></div></div>
<div id="relativeitemedit"><div id="iconeditrelative" style="background-color:#247ac2;"><a href="forms/Achgrelative.php?aid=2" title="EDIT RELATIVE OF 'POLLY'" class="box"><img src="img/icon-edit.png" class="iconrelativeimg" /></a></div></div>
</div>
$(document).ready(function() {
$('.FMRelativeNote').tooltipster({
theme: 'tooltipster-shadow',
position: 'right',
contentAsHTML: true,
onlyOne: true,
interactive: true,
functionInit: function(origin, content) {
if (content === 'LoadRelativeNote') {
//alert(RelativeNoteID);
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'POST',
url: 'inc/FMRelativeInfo.php',
data: NoteRelativeNoteIDphpVariable,
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while the content is loading...';
}
else {
// return nothing : the initialization continues normally with its content unchanged.
}
}
});
});
<div id="iconnamenoterelative" class="FMRelativeNote" title="<?=$FMID?>">
<div id="relative1" class="relativeitem">
<div id="relativeitemrelative">Father</div>
<div id="relativeitemname">Louis</div>
<div id="relativeitemnote"><div id="iconnamenoterelative" class="FMRelativeNote" title="23"><img src="img/icon-note.png" class="iconnamenoterelativeimg" /></div></div>
<div id="relativeitemedit"><div id="iconeditrelative" style="background-color:#247ac2;"><a href="forms/Achgrelative.php?aid=1" title="EDIT RELATIVE OF 'POLLY'" class="box"><img src="img/icon-edit.png" class="iconrelativeimg" /></a></div></div>
</div>
<div id="relative2" class="relativeitem">
<div id="relativeitemrelative">Sister</div>
<div id="relativeitemname">Twinny</div>
<div id="relativeitemnote"><div id="iconnamenoterelative" class="FMRelativeNote" title="21"><img src="img/icon-note.png" class="iconnamenoterelativeimg" /></div></div>
<div id="relativeitemedit"><div id="iconeditrelative" style="background-color:#247ac2;"><a href="forms/Achgrelative.php?aid=2" title="EDIT RELATIVE OF 'POLLY'" class="box"><img src="img/icon-edit.png" class="iconrelativeimg" /></a></div></div>
</div>
$(document).ready(function() {
$('.FMRelativeNote').tooltipster({
theme: 'tooltipster-shadow',
position: 'right',
contentAsHTML: true,
onlyOne: true,
interactive: true,
functionInit: function(origin, content) {
if (content != '') {
//alert(RelativeNoteID);
// when the request has finished loading, we will change the tooltip's content
$.ajax({
type: 'POST',
url: 'inc/FMRelativeInfo.php',
data: "FMRelativeID=" + content,
success: function(data) {
origin.tooltipster('content', data);
}
});
// this returned string will overwrite the content of the tooltip for the time being
return 'Wait while the content is loading...';
}
else {
// return nothing : the initialization continues normally with its content unchanged.
}
}
});
});