qtip2 툴팁을 동적으로 만드는 방법

Question

페이지가로드 될 때마다 툴팁이 완벽하게 작동하지만 데이터가 아약스를 통해 새로 고쳐지면 작동을 멈 춥니 다. 여기

$(document).ready(function() { 
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!! 
    $('.userExtend').each(function() { 

     $(this).qtip({ 
      content: { 
       text: function(event, api) { 
        $.ajax({ 
          url: api.elements.target.attr('data-url') // Use href attribute as URL 
         }) 
         .then(function(content) { 
          // Set the tooltip content upon successful retrieval 
          api.set('content.text', content); 
         }, function(xhr, status, error) { 
          // Upon failure... set the tooltip content to error 
          api.set('content.text', status + ': ' + error); 
         }); 

        return 'Loading...'; // Set some initial text 
       } 
      }, 
      position: { 
       viewport: $(window) 
      }, 
      hide: { 
       fixed: true, 
       delay: 300 
      }, 
      style: 'qtip-light' 
     }); 
    }); 
}); 

따르면 qtip2 우리가 http://jsfiddle.net/qTip2/qcwV4/는 동적으로 만들 수 있지만이 코드

Answer 1

무엇 qTip 바이올린 제안하는 소위 delegated event handler입니다과 통합 할 수없는 JQuery와 &에 새로 온 방법이다. 트릭은 부모 요소에 mouseenter 처리기를 연결하지만 선택기를 사용하여 하위 노드에 이벤트를 위임합니다. 모든 <a> 태그는 title 속성이 a[title]입니다.

이 방법을 자신의 코드에 쉽게 적용 할 수 있습니다. 당신은 클래스 .userExtend있는 모든 요소에 qTips을 바인딩 할 :

$('body').on('mouseenter', '.userExtend', function() { 
    $(this).qtip({ 
    content: { 
     text: function(event, api) { 
     $.ajax({ 
      url: api.elements.target.attr('data-url') // Use href attribute as URL 
      }) 
      .then(function(content) { 
      // Set the tooltip content upon successful retrieval 
      api.set('content.text', content); 
      }, function(xhr, status, error) { 
      // Upon failure... set the tooltip content to error 
      api.set('content.text', status + ': ' + error); 
      }); 

     return 'Loading...'; // Set some initial text 
     } 
    }, 
    position: { 
     viewport: $(window) 
    }, 
    hide: { 
     fixed: true, 
     delay: 300 
    }, 
    style: 'qtip-light' 
    }); 
}); 

유의 사항 ready() 핸들러의 부족; 필요하지 않으며 generally be avoided해야합니다.