плагин qtip не работает с jQuery jtemplates плагин

Question

Я использую Ajax для загрузки данных.

С помощью jQuery jTemplates я загружаю данные в Container. Мне нужно применить плагин jqtip к изображениям с Container, но по какой-то причине он не работает. если он работает отлично.

Любая идея, почему она не работает? может быть, дать мне представление, как я могу его отладить?

Вот мой код

$.ajax({ 
     type: "POST", 
     url: "/json/default.aspx/loaditems", 
     data: "{'parameter':'" + parameter + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) {     
      ApplyTemplate(msg);  
     } 
    }); 

function ApplyTemplate(msg) { 

    $('#Container').setTemplateURL('/scripts/template.htm', null, { filter_data: true }); 
    $('#Container').processTemplate(msg); 

} 

<div id="Container"> 
</div> 

здесь содержание моего template.htm страницы

{#foreach $T.d as post} 
     <div class="image_wrap" style="float: left;"> 
      <a href="{$T.post.url}"> 
       <img width="175" src="{$T.post.profimage}" title="test" /></a> 
     </div> 
     {#/for} 

здесь QTIP код

<script type="text/javascript"> 
     $(function() { 


      $('.image_wrap img[title]').qtip({ 
       position: { 
        corner: { 
         target: 'topMiddle', 
         tooltip: 'bottomMiddle' 
        } 
       }, 
       style: { 
        name: 'cream', 
        padding: '7px 13px', 
        color: '#350608', 
        width: { 
         max: 250, 
         min: 0 
        }, 
        tip: true 
       } 
      }); 
     }); 
    </script> 

Answer 1

Вы используете свой QTIP логику $ (документ) .ready(). Проблема в том, что, поскольку вы загружаете новую разметку после загрузки страницы, логика qtip к ней не применяется.

Попробуйте обернуть свою логику qtip внутри функции, а затем вызовите функцию после запуска вызова AJAX.

Что-то вроде этого:

function InitQtip() { 
    $('.image_wrap img[title]').qtip({ 
     position: { 
      corner: { 
       target: 'topMiddle', 
       tooltip: 'bottomMiddle' 
      } 
     }, 
     style: { 
      name: 'cream', 
      padding: '7px 13px', 
      color: '#350608', 
      width: { 
       max: 250, 
       min: 0 
      }, 
      tip: true 
     } 
    }); 
} 

// This will take care of items loaded with the page. 
$(function() { 
    InitQtip(); 
} 

// This will take care of new items. 
$.ajax({ 
    type: "POST", 
    url: "/json/default.aspx/loaditems", 
    data: "{'parameter':'" + parameter + "'}", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (msg) {     
     ApplyTemplate(msg); 
     InitQtip(); 
    } 
});