부트 스트랩의 앵커 링크 툴팁의 제목이 클릭 할 때 앵커처럼 작동하지 않습니다.

Question

부트 스트랩 툴팁을 사용하여 SVG 경로에 정보를 추가하고 있습니다. 툴팁 제목에 앵커 링크를 추가했는데 앵커를 클릭하여 무언가를 할 때까지 괜찮습니다. 그것은 닻처럼 행동하지 않으며 어떤 사건도 일으키지 않습니다.

이

코드입니다 : 당신이 .view-seats 요소가 아직 DOM에 추가되지 않은 클릭 핸들러를 초기화

<g id="B2" class="blockgroup"> 
    <path id="B2_Block" class="block" d="M195.4,128.9c-28,18.2-51.9,42.2-70.1,70.2l33.3,19.3c14.8-22.6,34-42,56.5-57L195.4,128.9z"/> 
    <text id="B2_Text" transform="matrix(1 0 0 1 166.0186 177.8625)" class="text">B2</text> 
</g> 

$('.blockgroup').tooltip({ 
      html: true, 
      animation: true, 
      container:'body', 
      trigger: 'click', 
      title: function(){ 
       return '<div class="tooltip-box">' + 
          '<span>Block</span>' + 
          '<h3>' + this.id + '</h3>' + 
          '<a href="#" class="view-seats" data-block-id="' + this.id + '">View Seats</a>' + 
         '</div>'; 
      } 

     }); 


$('.view-seats').on('click', function(e){ 
    e.preventDefault(); 
    console.log('clicked'); 
}); 

Answer 1

. 이 요소는 tooltp가 표시된 후에 DOM에 추가됩니다. 이 작업을해야합니다 : [? 이벤트가 동적으로 생성 된 요소에 바인딩]

$(document).on('click', '.view-seats', function(e){ 
    e.preventDefault(); 
    console.log('clicked'); 
}) 

의