jquery - Poshytip plugin in dynamically created element

Question

I am using poshyTip tool tip plugin .

This is the function called in document ready:

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

but it's not working on dynamically created elements.

Does any fixes available for this?

div structure is like this :

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

On Ajax Response this complete div structrue is newly added.

Have tried .on in jQuery on dynamically created elemetns but it doesn't show up.

Thanks.

Answer 1

Use liveevents:true option for dynamically created elements.

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

Fiddle

For manual trigger event with LiveEvents if it is not working, try a hack by initializing it if not initialized already.

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