Popover does not work when added dynamically by jquery

0

I have a div with a lot of information and a popover (Bootflat).

When I add via jquery another equal div, the new popover of the new div does not work. (the div is formatted correctly and the popover code is also correct)

Below, the 1st tr is already on the page, the 2nd tr is added dynamically via jQuery.

<tr id="36" class="remove-runner ">
<th scope="row">aaa bbb
    <div class="checkpoint_options_hor tooltip-demo">
        <i class="info_runner glyphicon glyphicon-info-sign" title="" data-container="body" data-html="true" data-toggle="popover" data-placement="top" data-content="<b> tyet:</b> UYT GGH<br /> <b>Esc:</b> M40<br /> <b>Estado:</b> Terminou<br /> " data-original-title="Run XPTO"></i> <i id="star_36" class="favorite_star glyphicon glyphicon-star" onclick="favoriteRunner(this, 36)" data-original-title="Add Runner fav" data-toggle="tooltip" data-placement="bottom"></i>
    </div>
</th>
<td data-title="P G">12º</td>
<td data-title="P S">13º</td>
<td data-title="P E">4º</td>                            
<td data-title="9k">1:20:55</td>
<td data-title="45k">6:56:42</td>
<td data-title="7k">14:51:59</td>
<td data-title="12k">28:57:39</td>
<td data-title="152k">39:08:31</td>
<td data-title="Meta">46:49:16</td>
<td>
    <a class="tooltip-demo">
        <i class="glyphicon glyphicon glyphicon-remove cursor_pointer" data-original-title="Remover atleta" data-toggle="tooltip" onclick="deleteDivCompare(this)" data-placement="left"></i>
    </a>
</td>

<tr id="41" class="remove-runner">
<th scope="row">UTGG Tggb
    <div class="checkpoint_options_hor tooltip-demo">
        <i class="info_runner glyphicon glyphicon-info-sign" title="" data-container="body" data-html="true" data-toggle="popover" data-placement="top" data-content="<b> yhuh:</b> <br /> <b>Esc:</b> SEsaM<br /> <b>Estado:</b> Finisher<br /> " data-original-title="Iujh YGAG"></i> <i id="star_41" class="favorite_star glyphicon glyphicon-star" onclick="favoriteRunner(this, 41)" data-original-title="Add Fav" data-toggle="tooltip" data-placement="bottom"></i>
    </div>
</th>
<td data-title="P G">12º</td>
<td data-title="P S">12º</td>
<td data-title="P E">7º</td>
<td data-title="9k">1:33:32</td>
<td data-title="4k">7:55:35</td>
<td data-title="79k">15:55:46</td>
<td data-title="125k">28:57:26</td>
<td data-title="15k">39:48:15</td>
<td data-title="Me">46:23:26</td>
<td>
    <a class="tooltip-demo">
        <i class="glyphicon glyphicon glyphicon-remove cursor_pointer" data-original-title="Remover atleta" data-toggle="tooltip" onclick="deleteDivCompare(this)" data-placement="left"></i>
    </a>
</td>

jQuery code to add the 2nd

$.ajax({
    type : 'post',
    url : 'folder/classXPTO.php',
    dataType : 'html',
    data : {
        id_xpto : id
    },
    beforeSend : function() {
    },
    complete : function() {
    },
    success : function(options) {

/ * options is the html code received by PHP * /                 $ ('.tbody'). append (options);

    },
    error : function(xhr, er) {

...         }     });

What can I do to fix this?

    
asked by anonymous 19.11.2017 / 18:55

0 answers