Wie bekomme ich Element in bootstrap popover nachdem Ajax geladen

Ich benutze PHP foreach, um die Liste der Elemente zu erhalten mit AJAX Paginierung, jedes Element Bootstrap Popover für die Bewertung verwenden (bedeutet die Bewertung html ist in 'Data-Content' attr). Beim ersten Laden funktioniert alles gut, ich kann andere Seiten sehen, wenn ich auf den Paginierungslink klicke, aber wenn Ajax geladen ist, wird das Bootstrap-Popover nicht angezeigt.
Wie bekomme ich Element in bootstrap popover nachdem Ajax geladen

-Wie erhalten 'Data-ID' und 'Data-Name' Attribut 'Rate-Multi-Select' Klasse.
-Wie erhalten Sie den Wert der Eingabe.
-Wie erhalten ID-Attribut der Klasse "Multi-Ajax-User-Rating". Hier

ist die popover Bewertung:

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

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>test</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
<div class="title-multi-rating popovered-rating popovered" title="Rate this!?" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<form method='POST' action='' class='orb-form orb-rating-form' id='orb-form'> 
 
    <section> 
 
    <label class='label'></label> 
 
    <div class='rating rate-multi-select' id='rate-select' data-id='118' data-name='people'> 
 
     <div class='multi-ajax-user-rating' id='0'></div> 
 
     <input type='radio' name='stars-rating' value='100' id='stars-rating-100'> 
 
     <label for='stars-rating-100' title='Juste magique :)'><i class='fa fa-heart'></i></label> 
 
     <input type='radio' name='stars-rating' value='90' id='stars-rating-90' > 
 
     <label for='stars-rating-90' title='Excellent'><i class='fa fa-heart'></i><label> 
 
    </div> 
 
    </section> 
 
    <!--<button type='submit' name='submit-rating' class='btn btn-success' value='ok'>Evaluer</button>--> 
 
</form>"> 
 
<span><img class="rating-image" src="/assets/images/Icons/icon-hate-large.png" alt=""/><strong>Element1</strong></span> 
 
</div> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

Quelle

2017-03-16 Benf Maappy

Ich sehe nicht, jede Ajax-Aufrufe – Nicholas

Wenn Sie nur JavaScript verwenden:

var elem = document.getElementById('rate-select'); 
 
    var attr_id = elem.getAttribute('data-id'); 
 
    var attr_name = elem.getAttribute('data-name'); 
 
    var elem_by_class = document.getElementsByClassName('multi-ajax-user-rating'); 
 
    
 
    console.log(attr_id); 
 
    console.log(attr_name); 
 
    console.log(elem_by_class); 
 
    
 
    for (var i = 0, n = elem_by_class.length; i < n; ++i) { 
 
    console.log(elem_by_class[i].id); 
 
}

<div class="title-multi-rating popovered-rating popovered" title="Rate this!?" data-container="body" data-toggle="popover" data-placement="bottom" data-content=""> 
 
<form method='POST' action='' class='orb-form orb-rating-form' id='orb-form'> 
 
    <section> 
 
    <label class='label'></label> 
 
    <div class='rating rate-multi-select' id='rate-select' data-id='118' data-name='people'> 
 
     <div class='multi-ajax-user-rating' id='0'></div> 
 
     <input type='radio' name='stars-rating' value='100' id='stars-rating-100'> 
 
     <label for='stars-rating-100' title='Juste magique :)'><i class='fa fa-heart'></i></label> 
 
     <input type='radio' name='stars-rating' value='90' id='stars-rating-90' > 
 
     <label for='stars-rating-90' title='Excellent'><i class='fa fa-heart'></i></label> 
 
    </div> 
 
    </section> 
 
    <!--<button type='submit' name='submit-rating' class='btn btn-success' value='ok'>Evaluer</button>--> 
 
</form> 
 
<span><img class="rating-image" src="/assets/images/Icons/icon-hate-large.png" alt=""/><strong>Element1</strong></span> 
 
</div>

Quelle

2017-03-16 20:55:28 Monicka

Danke, aber ich verwende Bootstrap popover also warum ‚Daten-content‘ attr ist leer –

Ich denke, Ihre HTML gebrochen ist, ich es in meinem Code bearbeitet Schnipsel. Kannst du es bitte in deinem Code beheben? – Monicka

Nein, es ist nur ich habe Bootstrap nicht geladen –

Es gibt einige Ereignisse von ajax Aktionen zu handhaben

$(document).ajaxStart(function() { 
    $(".bootstrap-element").show(); 
}); 


$(document).ajaxStop(function() { 
    $(".bootstrap-element").hide(); 
});

Diese 2-Funktion läuft jedes Mal erhalten Sie einen ajax Anruf. Ich nehme an, ajaxStop wird den Job machen.

Für weitere Informationen klicken Sie bitte auf this link

Quelle

2017-03-16 21:57:33 Nicholas

Sie haben es nicht bekommen .... Ich sagte, das Bootstrap-Popover wird nicht angezeigt, wenn der Ajax geladen hat die Elemente –

Wie bekomme ich Element in bootstrap popover nachdem Ajax geladen

Antwort

Verwandte Themen