在動態元素上使用相同的tooltipster-tooltip獲取動態內容

Question

我非常喜歡工具提示，但是現在有一個問題：我將生成一個動態的項目列表，並且在每個項目上都應該有一個工具提示。 該工具提示的內容應該是動態的，帶有ID，我通過工具提示將其發送到工具提示中的頁面。 但是可以肯定的是，使用當前代碼，我只能從列表的LAST ID中獲得每個工具提示中的動態內容。 因此，我不知道如何使用工具提示，並為每個列表項發送提示中動態內容的正確ID。

這是我的代碼：

清單項目的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>

生成的列表項的示例HTML：

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

二手工具提示的JS：

$(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.
            }
        }
    });
});

因此，我只需要幫助，以找到始終將正確的ID從PHP列表項發送到工具提示而不是LAST ID的方法。

PS：您可以在屏幕快照圖像中看到，內容始終是列表的最后內容，而不是其他內容！

Answer 1

在tooltipster支持的幫助下，我自己找到了解決方案：

PHP：

<div id="iconnamenoterelative" class="FMRelativeNote" title="<?=$FMID?>">

HTML：

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

JS：

$(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.
            }
        }
    });
});

謝謝，也許它也對某人有幫助！ :)