Twitter bootstrap: Popovers không hiển thị lên trên nhấp chuột đầu tiên nhưng hiển thị trên nhấp chuột thứ hai

Question

Đây là đánh dấu của tôi:

<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> 

Và đây là javascript:

$('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(); 
}); 

Vấn đề là khi tôi bấm vào nút 'like', popover không hiển thị trên lần nhấp đầu tiên vì vậy tôi bỏ lỡ phản hồi quan trọng cho dù tôi đã thích trang hay không. Khi tôi nhấp vào nút 'like' lần thứ hai popover xuất hiện và sau đó nó duy trì hành vi chuyển đổi của nó từ đó trở đi.Và ý tưởng?

Answer 1

Khi bạn lần đầu tiên nhấp vào liên kết của mình, chưa có cửa sổ bật lên nào được khởi tạo, có thể được hiển thị. Bạn khởi tạo cửa sổ bật lên với cuộc gọi đến $(element).popover();. Vì vậy, mã của bạn khởi tạo cửa sổ bật lên sau nhấp chuột vào liên kết và không có gì hiển thị lần đầu tiên. Lần thứ hai bạn nhấp vào nó, cửa sổ bật lên ở đó và có thể được hiển thị.

Bạn phải thực hiện cuộc gọi đến .popover() trước khi liên kết được nhấp. Trong trường hợp của bạn

$('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(); 
    }); 

nên thực hiện thủ thuật.

Thông báo cuộc gọi đến .popover({trigger: 'manual') trong dòng 2. Điều đó khởi tạo cửa sổ bật lên và vô hiệu hóa nó xuất hiện cùng một lúc sau khi bạn nhấp vào. Điều đó sẽ không hữu ích, vì bạn đã đặt nội dung của nó trong lời gọi AJAX và không thể hiển thị cửa sổ bật lên được nữa. Vì vậy, trong cuộc gọi lại, bây giờ bạn phải gọi .popover('show') theo cách thủ công, sau khi bạn đã đặt thuộc tính data-content.

Một điều nữa: Bạn phải gọi .popover('hide') tại một số thời điểm sau khi bạn hiển thị cửa sổ bật lên. Nó sẽ không biến mất khi bạn nhấp vào liên kết một lần nữa, kể từ đó cuộc gọi AJAX chỉ được kích hoạt một lần nữa và .popover('show') được gọi lại. Một giải pháp mà tôi có thể nghĩ đến là thêm một lớp vào liên kết khi cửa sổ bật lên đang hoạt động và kiểm tra lớp đó trên mỗi lần nhấp. Nếu lớp học ở đó, bạn chỉ có thể gọi .popover('hide') và xóa lớp học, nếu không thì thực hiện cuộc gọi AJAX của bạn. Tôi đã tạo a small jsfiddle để hiển thị ý của tôi.

Để biết thêm thông tin look at the docs.

Hy vọng điều đó sẽ hữu ích.