Pertanyaan Twitter bootstrap: Popovers tidak muncul pada klik pertama tetapi muncul pada klik kedua


Ini markup saya:

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

Dan ini adalah 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();
});

Masalahnya adalah ketika saya mengklik tombol 'like', popover tidak muncul pada klik pertama sehingga saya kehilangan respons penting apakah saya menyukai halaman atau tidak. Ketika saya mengklik tombol 'like', popover kali kedua muncul dan kemudian mempertahankan perilaku toggle dari sana dan seterusnya. Ada ide?


32
2017-09-08 18:57


asal


Jawaban:


Ketika Anda pertama kali mengklik tautan Anda, belum ada popis yang diinisialisasi, yang dapat ditampilkan. Anda menginisialisasi popover dengan panggilan ke $(element).popover();. Jadi, kode Anda menginisialisasi popover setelah klik pada tautan dan tidak ada yang ditampilkan pertama kali. Kali kedua Anda mengkliknya, popover ada di sana dan dapat ditampilkan.

Anda harus melakukan panggilan ke .popover() sebelum tautan diklik. Dalam kasusmu

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

harus melakukan trik.

Perhatikan panggilan ke .popover({trigger: 'manual') di baris 2. Itu menginisialisasi popover dan menonaktifkan yang muncul sekaligus setelah Anda mengklik. Itu tidak akan membantu, karena Anda mengatur kontennya di callback AJAX, dan tidak lama lagi popover dapat ditampilkan. Jadi, dalam panggilan balik, Anda sekarang harus menelepon .popover('show') secara manual, setelah Anda mengaturnya data-content atribut.

Satu hal lagi: Anda harus menelepon .popover('hide') di beberapa titik setelah Anda menunjukkan popover. Ini tidak akan hilang ketika Anda mengklik tautan lagi, sejak saat itu panggilan AJAX hanya terpicu sekali lagi dan .popover('show') dipanggil lagi. Satu solusi yang dapat saya pikirkan adalah menambahkan kelas ke tautan saat popover aktif dan memeriksa kelas tersebut di setiap klik. Jika kelas ada di sana, Anda cukup menelepon .popover('hide') dan menghapus kelas, lain lakukan panggilan AJAX Anda. saya menciptakan sebuah jsfiddle kecil untuk menunjukkan apa yang saya maksud.

Untuk info lebih lanjut lihat dokumennya.

Semoga itu membantu.


27
2017-09-08 19:35