动态创建元素中的Poshytip插件

时间:2013-05-28 05:33:03

标签: jquery tooltip

我正在使用poshyTip tool tip plugin

这是文档就绪中调用的函数:

$('#contentBoxContent div.schedule > a').poshytip({
    content: scheduleDiv,
    showOn: 'none',
    alignTo: 'target',
    alignX: 'left',
    alignY: 'center',
    offsetX: 0,
    offsetY: 0,
    liveEvents: true
});

$('#contentBoxContent div.schedule').on('click', 'a', function(){
      $(this).poshytip('show');
});

但它不适用于动态创建的元素。

是否有可用的修复程序?

div结构是这样的:

<div class="divId3 displayBlock">
    <div class="mp_t_cnt_1">4</div>
    <div class="mp_t_cnt_2"><a href="Javascript:void(0);">zz5</a></div>
    <div class="mp_t_cnt_3"><a href="Javascript:void(0);">zz5</a></div>
    <div class="mp_t_cnt_4"><span>English (USA)</span></div>
    <div id="tipBox2" class="mp_t_cnt_5">
    <a href="Javascript:void(0)" title="Total Keywords">0</a>
    </div>
   <div class="mp_t_cnt_6">xyz</div>
   <div class="mp_t_cnt_7">
      <div class="f_left_pding"><input type="radio"></div>
      <div id="tipBox1" class="f_left schedule">
         <a class="clck" href="Javascript:void(0)" id="clk1Btn185"></a>
      </div>
      <div class="f_left">
         <a class="close_1" href="Javascript:void(0)"></a>
      </div>
   </div>
 </div>

在Ajax Response上,新添加了完整的div结构。

在动态创建的elemet中尝试了jQuery中的.on,但它没有显示出来。

感谢。

1 个答案:

答案 0 :(得分:0)

对动态创建的元素使用liveevents:true选项。

$('#contentBoxContent .schedule > a').poshytip({
    content: scheduleDiv,
    showOn: 'none',
    alignTo: 'target',
    alignX: 'left',
    alignY: 'center',
    offsetX: 0,
    offsetY: 0,
    liveEvents: true
});

Fiddle

对于使用LiveEvents的手动触发事件,如果它不起作用,如果尚未初始化则尝试通过初始化来进行黑客攻击。

$('#contentBoxContent').on('click', 'a', function () {
    if (!$(this).data('poshytip')) // See if it is initialized 
      $(this).poshytip({
        showOn: 'none',
        className: 'tip-darkgray',
        alignTo: 'target',
        alignX: 'left',
        alignY: 'center',
        offsetX: 0,
        offsetY: 0
    });
    $(this).poshytip('show');
});