1

以下のHTMLは、「purchase_content」へのajax呼び出しを介して生成されます。各行の各リンクにツールチップを適用したいのですが、最大100行まで可能です。

これは現時点ではコードですが、成功していません。各リンクを2回ロールオーバーすると、ツールチップが表示されますが、二度と表示されません。各行のリンクのアドレス指定について何か考えはありますか？

<div id="purchase_content">
  <div id="pr-listing">

  <div id="pr-odd">
    <table width="950" height="100" border="0" cellpadding="0" cellspacing="0">
      <tr><td width="75" align="center" valign="middle">
        <a href="#" id="avlink" title="3-5 Working Days">5-7 Days</a>
      </td></tr>
    </table>
  </div>

  <div id="pr-even">
    <table width="950" height="100" border="0" cellpadding="0" cellspacing="0">
      <tr><td width="75" align="center" valign="middle">
        <a href="#" class="avlink" title="3-5 Working Days">Available Now</a>
      </td></tr>
   </table>
  </div>

  </div>
</div>

$('a.avlink').live('mouseover', function(e) {
  var target = $(e.target);
  return $(target).tooltip({
    track: true,
    delay: 0,
    opacity: 0.9,
    showURL: false,
    showBody: " - ",
    extraClass: "pretty",
    fixPNG: true,
    left: -120
  });
});
4

2 に答える 2

0

各リンクの外側の < td > に ID "pr-cell" を追加し、各リンクに一意の ID を持つすべての < a > タグに適用しました。

$('#pr-cell > a').live('mouseover', function(e) {
    $('#pr-cell > a').not('.hasToolTip')
    .addClass('hasToolTip')
    .tooltip({
        track: true,
        delay: 0,
        opacity: 0.9,
        showURL: false,
        showBody: " - ",
        extraClass: "pretty",
        fixPNG: true,
        left: -120
    });
});
于 2010-10-05T09:53:21.577 に答える
0

ajax 成功ハンドラに、次のようなものを追加してみてください。

$('a.avlink').not('.hasToolTip') // hasToolTip with a dot in it
.addClass('hasToolTip')   // hasToolTip without a dot in it
.tooltip({
    track: true,
    delay: 0,
    opacity: 0.9,
    showURL: false,
    showBody: " - ",
    extraClass: "pretty",
    fixPNG: true,
    left: -120
});
于 2010-10-05T07:17:22.093 に答える