트위터 부트 스트랩 : 이것은 내 마크 업 Popovers이 첫 번째 클릭에 게재하지만, 두 번째 클릭

Question

에 표시되지 않습니다이다 :

<a href="#" class="reviews" id="like" rel="popover" data-content="" data-placement="right" data-original-title="Like episode"> 
    <i class="icon-thumbs-up"></i> 
    Loved it 
</a>(<span id="episode_likes">{{ episode_likes }}</span> 

그리고 이것은 자바 스크립트입니다 :

$('a.reviews#like').click(function(e){ 
    var element = $(this); 
    $.ajax({ 
     url: '/episoderatings/like/', 
     type: 'POST', 
     dataType: 'json', 
     data: { 
      csrfmiddlewaretoken: '{{ csrf_token }}', 
      episode_number: current, 
      story: current_story 
     }, 
     success: function(response){ 
      if(response=='You have liked this episode'){ 
       $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1); 
      } 
      $(element).attr('data-content',response); 
      $(element).popover(); 
     } 
    }); 
    e.preventDefault(); 
}); 

문제는 I이다 '좋아요'버튼을 클릭하면 첫 번째 클릭에 팝업이 표시되지 않으므로 페이지가 마음에 들었는지 여부에 관계없이 중요한 응답을 놓칠 수 있습니다. '좋아요'버튼을 클릭하면 두 번째 팝업 창이 나타나고 그 다음에 그곳에서부터 토글 행동을 유지합니다. 그리고 아이디어?

Answer 1

링크를 처음 클릭하면 아직 초기화되지 않은 상태로 표시 될 수 있습니다. $(element).popover(); 호출을 사용하여 팝업을 초기화합니다. 따라서 코드가 인 후 링크를 클릭하면 아무 것도 처음 표시되지 않고 팝업이 초기화됩니다. 두 번 클릭하면 popover가 나타나서 보여 질 수 있습니다.

링크를 클릭하기 전에 .popover()으로 전화해야합니다. 귀하의 경우

$('a.reviews#like') 
    .popover({trigger: 'manual'}) 
    .click(function(e){ 
     var element = $(this); 
     $.ajax({ 
      url: '/episoderatings/like/', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       csrfmiddlewaretoken: '{{ csrf_token }}', 
       episode_number: current, 
       story: current_story 
      }, 
      success: function(response){ 
       if(response=='You have liked this episode'){ 
        $('span#episode_likes').text(parseInt($('span#episode_likes').text())+1); 
       } 
       $(element).attr('data-content',response).popover('show'); 
      } 
     }); 
     e.preventDefault(); 
    }); 

트릭을해야합니다.

두 번째 줄에 .popover({trigger: 'manual')을 호출 한 것에 주목하십시오. 그러면 팝업을 초기화하고 클릭 한 후에 즉시 나타나지 않도록 설정합니다. 당신이 AJAX 콜백에 내용을 설정했기 때문에 그것은 도움이되지 않습니다. 따라서 data-content 특성을 설정 한 후에는 콜백에서 .popover('show')을 수동으로 호출해야합니다.

한 가지 더 : 팝업을 표시 한 후 어느 시점에 .popover('hide') (으)로 전화해야합니다. 링크를 다시 클릭하면 사라지지 않습니다. AJAX 호출은 다시 한 번 트리거되고 .popover('show')이 다시 호출되기 때문에 사라지지 않습니다. 내가 생각할 수있는 한 가지 해결책은 popover가 활성 상태 일 때 링크에 클래스를 추가하고 각 클릭에 대해 해당 클래스를 확인하는 것입니다. 수업이있을 경우 .popover('hide')으로 전화하여 수업을 삭제하고 AJAX에 전화를 걸면됩니다. 내가 의미하는 바를 나타 내기 위해 a small jsfiddle을 만들었습니다.

자세한 내용은 look at the docs.

희망이 있습니다.