새로 생성 된 툴팁 내 jQuery 문자 카운터

Question

나는이 것을 알아 내는데 어려움을 겪고 있습니다. 사용자가 툴팁을 열려고 시도하고 있습니다 (jQuery qTip 사용). 이것이하는 일은 페이지에 "새로운"툴팁 요소를 만드는 것입니다. 그것은 웹 페이지의 기존 숨겨진 HTML div에서 가져옵니다.

이 새로운 툴팁이 생성되면 사용자가 텍스트 상자 (툴팁 내부에 있음)에 입력 할 때 동적으로 업데이트되는 문자 카운터가 있습니다.

"최대 길이 문자 카운터"스크립트는 here입니다.

그러나 "카운터"부분이 새로 생성 된 툴팁 내에서 작동하지 않습니다. 모든 아이디어를이 최대 길이의 문자 카운터를 툴팁에 바인딩 할 수있는 방법은 무엇입니까?

load_qtip(apply_qtip_to) { 
    $(apply_qtip_to).each(function() { 
     $(this).qtip({ 
      content: $(".tooltip-contents"), //this is a DIV in the HTML 
      show: 'click', 
      hide: 'unfocus' 
     }); 
    }); 
} 

$(document).ready(function() { 
    load_qtip(".tooltip"); 
    $('.my_textbox').maxlength({ 
     'feedback': '.my_counter' 
    }); 
}); 

그리고 여기에 HTML은 기본적으로 (기억하지만,이 전체 사업부가 새로운 툴팁에 "복제"한다)의 모습입니다 : 여기

내가 지금까지 함께 일하고 있어요 무엇

<div class="tooltip_contents"> 
    <form> 
     <div class="my_counter" id="counter">55</div> 
     <textarea class="my_textbox" maxlength="55" id="textbox"></textarea> 
     <input type="button" value="Submit"> 
    </form> 
</div> 

내가 완전히 잃어 버렸기 때문에 이것에 대한 방향이나 제안은 훌륭 할 것입니다. 매우 감사합니다!

편집 : 당신은 여기뿐만 아니라 작업 예제를 볼 수 있습니다 http://jsbin.com/ineja3/3

문자 카운터 (숨겨져있는) 원래 DOM 요소에서 작동합니다. 그러나 그것은 툴팁에 적용되지 않습니다.

Answer 1

나는 이런 식으로 뭔가 찾기 위해 qTip 라이브 핸들러 변경할 때 그것은 나를 위해 일한 : 당신이 최대 길이를 적용하기 전에 qTip 동적 텍스트 영역을 만들 수 있도록해야하기 때문에

$(".tooltip").live('click', function(e) { 
    e.preventDefault(); 
    $('.text_area').maxlength({ 
     'feedback' : '.counter' 
    }); 
}); 

나는이 추측하고있어입니다 . 이는 $ ('. text_area') 선택기가 텍스트 영역이 존재할 때까지 텍스트 영역을 찾지 못하여 피드백 코드를 첨부 할 수 없기 때문입니다. 누군가가 툴팁 링크를 클릭 할 때마다 maxlength 함수를 실행하는 데 어떤 영향이 있는지 알 수는 없지만 부울 플래그 또는 무언가를 사용하여 한 번만 실행되도록 설정할 수 있어야합니다.

Answer 2

.tooltip에 추가 클릭 이벤트를 추가하는 것보다 다른 방법 (& 일 것임)은 qTip API (specifically onShow)에 내장 된 콜백 함수를 사용하는 것입니다. 따라서 초기화 코드를 다음으로 변경하십시오 :

$(apply_qtip_to).each(function() { 
    $(this).qtip({ 
     content: $(".tooltip-contents"), //this is a DIV in the HTML 
     show: 'click', 
     hide: 'unfocus', 
     api: { 
      onShow: function() { 
       $('.text_area').maxlength({ 'feedback' : '.counter'}); 
      } 
     } 
    }); 
});