ajax加载后如何在引导弹出窗口中获取元素答案

【问题标题】：How to get element in bootstrap popover after ajax has loadedajax加载后如何在引导弹出窗口中获取元素
【发布时间】：2017-03-16 20:45:22
【问题描述】：

我使用 php foreach 来获取要使用 ajax 分页进行评分的元素列表，每个元素都使用引导弹出框进行评分（意味着评分 html 位于“数据内容”属性中）。第一次加载时一切正常，当我点击分页链接时，我可以看到其他页面，但是当 ajax 加载时，引导弹出窗口不显示。

-如何获取“rate-multi-select”类的“data-id”和“data-name”属性。
-如何获得输入的价值。
-如何获取'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>

【问题讨论】：

我没有看到任何 ajax 调用

标签： jquery html

【解决方案1】：

如果你只使用 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>

【讨论】：

谢谢，但我使用引导弹出框，所以为什么“数据内容”属性为空
我认为您的 HTML 已损坏，我在代码 sn-p 中对其进行了编辑。你能在你的代码中修复它吗？
如果你尝试运行你的代码 sn -p 你会发现你有语法错误
我添加了引导程序，但不要忘记加载 ajax 后弹出窗口不起作用
现在我看到你使用 jQuery，我的回答不再有意义。无论如何，我的代码中仍然存在语法错误。

【解决方案2】：

有ajax的一些事件来处理动作

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


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

每次您拨打ajax 电话时都会运行这两个函数。我想ajaxStop 会完成这项工作。

更多信息请关注this link

【讨论】：

你没有明白......我说当 ajax 加载元素时，引导弹出窗口不显示