如何在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中获取元素

回答

相关问题