関数から動的ポップオーバーを作成

Question

私は翻訳ソーシャルネットワークに取り組んでいます。ポストでは、それぞれの提案（stackoverflowの回答に似ています）の投票に関する統計情報を表示する必要があるため、ユーザーを呼び出すたびにポップオーバーを作成する必要があります動的コンテンツのラベルに表示されます。

function Popx(id) 
 
{ 
 
    $(id).popover({//here is my problem, I want dynamic id not static 
 
     html: true, 
 
     trigger: 'hover', 
 
     content: function() { 
 
      return $.ajax({url: 'ajax/ajaxpopoverstat.php?uid=1', 
 
       dataType: 'html', 
 
       async: false}).responseText; 
 
     } 
 
    }).hover(function (e) { 
 
     $(this).popover('toggle'); 
 
    }); 
 
}

<div class="label label-default" style="background-color: orange; font-size: x-large" data-poload="ajax/ajaxpopoverstat.php" id="xword" onmouseover="Popx(this.id)">Suggested Word</div>

任意のヘルプ？

Answer 1

。私が正しいだ場合、this JSFIDDLE example should do exactly what you need

$(document).ready(function(){ 
    $('div.label').popover({ //here is my problem, I want dynamic id not static 
     html: true, 
     trigger: 'hover', 
     content: function() { 
     return "Skittles and ids of: " + $(this)[0].id; 
     } 
    }).hover(function(e) { 
     $(this).popover('toggle'); 
    }); 
}); 

はまた、私はあなたのポップオーバーが正常に切り替えることを得るこの更新フィドルに：これは私の最初の問題を解決しますが Updated Fiddle

Answer 2

あなたはID変数の代わりに「＃」のこのメークを使用して、あなたのhtmlタグを選択している

説明jqueryのIDセレクタをハッシュ。

コード私はあなただけのポップオーバーが要素に反応するようにしたい、とあなたが必ずしも機能でそれをしたくない推測していますあなたはポップオーバー機能を持っているトリガに基づいて

function Popx(id) { 
     // make use of ID selector 
     $('#' + id).popover({ 
     html: true, 
     trigger: 'hover', 
     content: function() { 
      return $.ajax({url: 'ajax/ajaxpopoverstat.php?uid=1', 
       dataType: 'html', 
       async: false}).responseText; 
     } 
     }).hover(function (e) { 
     $(this).popover('toggle'); 
     }); 
    }