Saya menggunakan tooltipster dengan konten HTML dan perlu mengaitkan onclick elemen di dalam konten HTML. kode saya terlihat seperti ini:

    $('.groups-tooltip').tooltipster({            
        contentCloning: true,
        trigger: 'custom',
        interactive: true,
        contentAsHTML: true,
        triggerOpen: {
            mouseenter: true
        },
        triggerClose: {
            mouseleave: true
        },

        functionReady: function(instance, helper){   
            $(".tooltip-template-div").hide();
            $('.tooltip-template-span').on("click", function(){ 
                console.log("Clicked!");
            });  

            instance.content($('#tooltip-template').html());
        }      
    });

tooltip-template hanyalah wadah div untuk elemen tooltip-template-div dan tooltip-template-span.

Itu

$(".tooltip-template-div").hide();

Bagian berfungsi dengan baik tetapi pengait onclick tampaknya tidak memiliki efek apa pun.

Terima kasih!

1
Jonatan44 10 Agustus 2017, 14:19

2 jawaban

Jawaban Terbaik

Anda menambahkan pendengar acara sebelum memasukkan html:

Coba balik urutannya

  functionReady: function(instance, helper){ 
       instance.content($('#tooltip-template').html());  
        $(".tooltip-template-div").hide();
        $('.tooltip-template-span').on("click", function(){ 
            console.log("Clicked!");
        });

    }  
3
charlietfl 10 Agustus 2017, 11:25

Anda harus mengikat acara klik sebelum menginisialisasi tooltipster.

$(document).ready(function(){
    $('.tooltip-template-span').on('click', function() {
      alert("Clicked!");
    });

   $('.groups-tooltip').tooltipster({            
        contentCloning: true,
        trigger: 'custom',
        interactive: true,
        contentAsHTML: true,
        triggerOpen: {
            mouseenter: true
        },
        triggerClose: {
            mouseleave: true
        },

        functionReady: function(instance, helper){
            $(".tooltip-template-div").hide();
            $('.tooltip-template-span').click();
            instance.content($('#tooltip-template').html());
        }   
        }
   );
});

Anda dapat memeriksa dari https://jsfiddle.net/8jmt0he6/

2
Nikunj Bambhroliya 10 Agustus 2017, 12:18