동시에 다른 툴팁 선택자가 본체에 있습니까?

Question

아이콘을 사용하여 무언가를 삭제, 편집 또는 생성 할 수있는시기를 나타내는 관리 웹 사이트가 있습니다. 나는 그렇게 부트 스트랩을 툴팁을 사용하고, 아이콘/버튼을 삭제할 수있는 모든 페이지의 모든 요소에 툴팁을 결합하는 것은 간단하다

$('.delete-btn').tooltip({ 
    placement: 'top', 
    title: 'Slet' 
}); 

나는 (새 버튼 삭제) 새로운 요소를 추가 아약스와 DOM 조작을 사용하기 때문에 , 이전 예에서는 새로 추가 된 (문서 준비가 완료된) 버튼에 툴팁을 추가하지 않습니다. 다음과 같은 해결책을 찾았습니다.

$('body').tooltip({ 
    selector: '.delete-btn', 
    placement: 'top', 
    title: 'Slet' 
}); 

잘 작동합니다. 문제는 '.edit-btn'에 툴팁이 필요하다는 것입니다. 위의 예를 복제하고 선택기를 '.edit-btn'으로 바꿀 수 있다고 생각했습니다. 문제는 작동하지 않습니다. body 요소의 첫 번째 툴팁 만 작동하는 것 같습니다. 나는 주문을 교환하고 나서 '.edit-btn'을 얻을 수는 있지만 'delete-btn '은 작동을 멈춘다. 그것은 단지 한 번에 주어진 요소 (본문)에 대해서만 툴팁을 설정할 수 있으며 다른 선택기를 전달할 때도 첫 번째 요소 만 작동합니다.

여기에 뭔가가 누락 되었습니까? 쉽게 해결할 수 있습니까? 수동으로 툴팁을 사용하여 새로 생성 된 모든 요소를 ​​수동으로 초기화 할 필요가 없다면 정말 좋을 것입니다.

Answer 1

... 나는 또한

$('body').on('mouseover', '.btn-delete', function()... 
$('body').on('mouseout', '.btn-delete', .... 

일을 생각하지만 그건 많은 작업처럼 보인다 부트 스트랩 플러그인에서 내 자신의 코드에 떨어져 툴팁을 보여주는 책임을 이동 나는 내가 찾은 것 같아요 해결책을 찾지 만 여기에 남겨 두어 더 나은 방법이 있는지 말해 줄 수 있습니다.

$('body').tooltip({ 
    selector: '.edit-btn, .delete-btn, .create-btn', 
    placement: 'top', 
    title: function() { 
     var elem = $(this); 
     if (elem.hasClass('edit-btn')) 
      return 'Rédiger'; 
     if (elem.hasClass('delete-btn')) 
      return 'Slet'; 
     if (elem.hasClass('create-btn')) 
      return 'Opret'; 

     return 'fejl match tooltip'; 
    } 
});