jquery 팁을 기존 요소에 다시 적용하는 방법

추가 정보를 표시하려면 jquery tipsy 툴팁을 사용하고 있습니다. 이제 웹 사이트를 반응 형으로 만들었으므로 크기 조정 이벤트 리스너를 추가했으며 페이지 크기에 따라 다소의 요소가 표시되었습니다. 따라서 팁티 툴팁을 다시 적용해야합니다. 예. 나는 아직 새로운 요소가있을 수 있습니다.jquery 팁을 기존 요소에 다시 적용하는 방법

불행히도 각 재 적용 후에 나는 이미 존재하는 팁시를 대체하지 않았지만 위에 또 다른 것을 추가 한 것으로 보입니다.

효과를 보려면 jsfiddle을 확인하십시오. HTML 결과 창 크기를 조정하면 도구 설명이 표시 될 때 자바 스크립트 콘솔에서 여러 콜백을 볼 수 있습니다.

http://jsfiddle.net/7mbbcmvz/1/

html로 코드 :

<body> 
    <a href="xy">xxx</a> 
</body>

자바 스크립트 코드 :

var i = 0; 

function addTipsy(event) { 
    $('a').tipsy({ 
     title: function() { 
      i = i + 1; 
      console.log('mouseenter ' + i); 
      return 'test'; 
     } 
    }); 
}; 

addTipsy(); 

window.addEventListener('resize', addTipsy);

출처

2014-11-13 Fabian

을 그때? 나는 그것을 올바르게 할 수 없다. – tmarwen

addTipsy()를 호출하기 전에 이전 핸들러를 제거해보십시오. 참조 http://stackoverflow.com/questions/3449321/jquery-how-to-remove-the-tipsy-tooltip – sb9

문제는 표시된 팁이 아니므로 처리기가 여러 번 등록됩니다. jsfiddle을 실행하고 자바 스크립트 콘솔을 엽니 다. 창 크기를 조정하면 표시된 단일 툴팁에 대해 여러 이벤트가 표시됩니다. – Fabian

바인딩 해제 mouseenter 및 mouseleave 기운 핸들러를 다시 적용하기 전에 작동하는 것 같다 :

var i=0; 

function addTipsy(event) { 
    $("a").unbind('mouseenter mouseleave'); 
    $('a').tipsy({ 
     title: function() { 
      i = i + 1; 
      console.log('mouseenter ' + i); 
      return 'test'; 
     } 
    }); 
}; 

addTipsy(); 

window.addEventListener('resize', addTipsy);

또 다른 클래스를 추가하여 이미 기운 핸들러가 이러한 요소를 기억하는 것, 오직 그 클래스하지 않는 요소에 기운 처리기를 추가 : 문제가 무엇

function addTipsy(event) { 
    $('a').not(".tipsyApplied").addClass("tipsyApplied").tipsy({ 
     title: function() { 
      i = i + 1; 
      console.log('mouseenter ' + i); 
      return 'test'; 
     } 
    }); 
};

출처

2014-11-13 16:58:07 sb9

고마워요.이 작품은 좋은 해결책인지 모르겠지만, 그 자체로 imho를 처리해야합니다.하지만 지금까지 행복합니다! – Fabian

jquery 팁을 기존 요소에 다시 적용하는 방법

답변

관련 문제