如何在ajax加載後在bootstrap popover中獲取元素

我使用php foreach獲取使用ajax分頁評分的元素列表，每個元素使用bootstrap popover進行評分（意味着評分html在'data-content'attr ）。在第一次加載一切正常，我可以看到其他頁面，當我點擊分頁鏈接，但是當Ajax已經加載引導彈窗沒有顯示。
如何在ajax加載後在bootstrap popover中獲取元素

- 如何獲得'data-id'和'data-name'屬於'rate-multi-select'類。
- 如何獲得輸入值。
- 如何獲得'multi-ajax-user-rating'類的ID屬性。

這裏是酥料餅的評價：

$('[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>

來源

2017-03-16 Benf Maappy

我沒有看到任何AJAX調用 – Nicholas

如果你只使用JavaScript：

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>

來源

2017-03-16 20:55:28 Monicka

謝謝，但我用引導酥料餅，爲什麼「數據內容」 attr爲空 –

我覺得你的HTML壞了，我在我的代碼編輯它片段。你能否修復它在你的代碼？ – Monicka

不，它只是我沒有收取bootstrap –

還有的ajax一些事件處理行動

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


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

這2個功能將每次運行，你將作出ajax電話。我想ajaxStop將完成這項工作。

欲瞭解更多信息，請this link

來源

2017-03-16 21:57:33 Nicholas

你沒有得到它....我說bootstrap popover不顯示何時加載ajax要素 –

如何在ajax加載後在bootstrap popover中獲取元素

回答

相關問題