Holen Sie sich die Elemente von HTML-tags innerhalb von Daten-Inhalt des popover

Arbeite ich in der "popover" von Bootstrap3. Hier habe ich den HTML-Inhalt wie unten

<a href='#' class='btn' title ='Test' data-trigger='focus' data-
toggle='popover' data-html='true' id = 'testOutside' data-content='<a 
href="#" id="testInside" class="btn">Inside</a>'>Click Here </a>

Ich bin nicht in der Lage, beziehen sich auf das html-element innerhalb des data-Attribut content.

Wie unten

$(document).ready(function(){
$('[data-toggle="popover"]').popover();

//the below is not working
$('#testInside').click(function(){
alert('Inside');
});

$('#testOutside').click(function(){
alert('Outside');
});
});

Aber die bootstrap-Klassen werden immer angewendet, In diesem Fall "btn" wird immer angewendet, um die Anker-tag. Die Befestigung der jsFiddle. Kann jemand erklären mir das an?

Ihre Frage ist ungenau.

InformationsquelleAutor novice_developer | 2015-07-19

  1. 5

    Eigentlich ist es möglich, es zu tun, einfach mit der shown.bs.popover auslösen. Es wird ausgeführt, nachdem das popover angezeigt. Es ist dann möglich add new listeners oder aktualisieren Sie die vorhandene.

    Javascript

    $('[data-toggle="popover"]').popover(
    {html:true}
);

$('[data-toggle="popover"]').on('shown.bs.popover', function () {
    $('#testInside').click(function(){
        alert('Inside');
    });

    $('#testOutside').click(function(){
        alert('Outside');
    });
})

    HTML

    <a href='#' class='btn' title ='Test' data-trigger='focus' data-
toggle='popover' data-html='true' id = 'testOutside' data-content='<a
href="#" id="testInside" class="btn">Inside</a>'>Click Here </a>

    InformationsquelleAutor Online-Free-Tools.com

  2. 1

    Wenn Ihr Dokument fertig ist, gibt es kein element in den DOM, hat eine id von testInside. Dieses element wird erstellt, wenn Sie auf #testOutside. Aufgrund dieser, alle event-handler, die Sie erstellen, auf $(document).ready(...) ist nutzlos.

    So, der richtige Weg, dies zu tun ist, um einen Rückruf zu registrieren sofort nach #testInside ist Hinzugefügt, um den DOM. Und wir wissen, dass dies geschieht, wenn #testOuside angeklickt.

    //adding delay over here due to popover close event may trigger before link click event (which happens in Firefox)
$('you-selector').popover({
    delay: 100
});

$('#testOutside').click(function(){
    $('#testInside').click(function(){
        alert('Inside');
    });

    alert('Outside');
});
    Das ist leider nicht wahr, auch wenn es scheint offensichtlich zu sein. Die Zeichenfolge innerhalb der data-content - Attribut ist nur eine Zeichenfolge, und es wird Hinzugefügt, mit $.text() Methode. Aber das ist nicht alles, Ereignis, wenn Sie erzwingen, dass den popup zu verwenden $.html() wird es noch nicht funktionieren.
    Tut mir Leid, aber ich bin nicht einverstanden mit dem, was Sie sagen. Hier ein JsFiddle demonstrieren meine Antwort: jsfiddle.net/parthsha/8zs660na/1
    Kopieren Sie Ihre Geige link, öffnen Sie ein neues browser-Fenster und Sie werden sehen, dass in chrome funktioniert Sie nur nach dem Klick auf den Auslöser ein zweites mal und in firefox funktioniert es nicht bei allen.
    sind Sie richtig. Und ich habe gelernt, eine neue Sache heute. Ich danke Ihnen, sir!
    Kein problem, happy coding. 😉

    InformationsquelleAutor Parth Shah

  3. 0

    Machte ich einen sehr schwierigen problem einfach möglich mit gezeigt.bs.popover auch die Sache ist, ich habe eine rating-Komponente auf der pophover , aber das problem war die Bewertung nicht das hover-Ereignis, denn diese Methode muss aufgerufen werden, die auf die Bewertung Eingang erstellt.

    $(".rating_product").rating('refresh', 
 {showClear: false,hoverEnabled:true,hoverChangeStars:true,showCaption: true,starCaptions: {5.0:'5 Stars'}
 });

    So, ich habe dies und es funktionierte, als der eingefügten Funktion.

    $('[data-toggle="popover"]').on('shown.bs.popover', function () {


          $(".rating_product").rating('refresh', 
            {showClear: false,hoverEnabled:true, hoverChangeStars:true,showCaption: true,starCaptions: {5.0:'5 Stars'}
          });

})

    InformationsquelleAutor danielad

Schreibe einen Kommentar