JavaScript - Error loading new popover

-1

I have a page that contains mosaic of images with a button and when I click I open a popover. Until then okay, because this mosaic is generated by blade.php , of laravel 5. But I change the mosaic from the filters on the page itself and the popover stops working, being generated from the same "html code".

HTML HTML code, Stat

  <div class="avancar-mosaico" >
    <div id="wrapper">
        <div class="row" style="margin: 0px;">
            <div id="outer">
                @foreach($Emp as $emp)
                <div class="itemwrapper col-md-3 col-sm-3 col-xs-12" style="padding: 0px;">
                  <img src="{{asset('/images/mosaico')}}/{{$emp->numF1}}-{{$emp->eixo}}-0{{$emp->numP1}}.png" alt="Imagem do empreendimento" />
                    <figcaption>
                        <a href="{{route('empreendimentos.view', ['id' => $emp->idn_empreendimento])}}">{{$emp->obra}}</a>
                        @if($emp->distancia == null)
                        <span class="info-municipio">{{$emp->cidade}},  {{$emp->estado}}</span>
                        @else
                        <span class="info-municipio">{{$emp->distancia}}</span>
                        @endif
                    </figcaption>
                    <!--{{$barra =  ($emp->execucao_fisica != 100) ? 'progress-bar-warning progress-extra': 'progress-bar-complete progress-extra'}}
                    {{$caminho = route('empreendimentos.view', ['id' => $emp->idn_empreendimento])."?ref=busca"}}-->                 
                  <div class="mosaico-botoes">
                    <a                            
                        data-template='
                        <div class="popover" role="tooltip">
                            <span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-emp" aria-hidden="true"></span>
                            <div class="dbw-map-location-container"  style="color:gray">
                                <div class="dbw-map-location-info">
                                    <div class="dbw-map-location-info-details">
                                        <div class="empreendimento_estagio_titulo">ESTÁGIO DA OBRA</div>
                                        <center>
                                        <div class="progress progress-extra-2" sytle ="width: 90px;">
                                            <div class="progress-bar {{$barra}}" role="progressbar" aria-valuenow="{{round($emp->execucao_fisica)}}" aria-valuemin="0" aria-valuemax="100" style="width:{{$emp->execucao_fisica}}%">
                                            </div>
                                        </div>
                                        <div class="row" style="text-align: left;margin-bottom: 20px;">
                                            <div class="col-md-6" style="border: 0;">
                                                <STRONG style="font-size: 24px" class = "empreendimento_perc_exec">{{round($emp->execucao_fisica)}}%&nbsp;•&nbsp;</STRONG>
                                            </div>
                                            <div style="font-size:14px;border: 0;padding-top: 14px;" class ="empreendimento_perc_status col-md-6">
                                                {{$emp->estagio}}
                                            </div>
                                        </div>
                                        <div class="row" style="text-align: left;margin-bottom: 20px;">
                                            <div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">
                                                INICIO<br>
                                                <u class="empreendimento_dates" style="font-size: 20.5px;">
                                                {{format_date($emp->data_selecao)}}</u>
                                            </div>
                                            <div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">
                                                CONCLUSÃO<br>
                                                <u class="empreendimento_dates" style="font-size: 20.5px;">
                                                {{format_date($emp->data_conclusao)}}</u>
                                            </div>
                                        </div>
                                        <center>
                                            <a href={{$caminho}} class="btn btn-primary btn-xs btn-avancar">Saiba mais</a>
                                        </center>
                                    </center>
                                </div>
                            </div>
                        </div>
                    </div>'    
                        data-content=' ' id="a3" style="cursor: pointer;width: 150px;" data-toggle="popover" data-placement="bottom">
                        <img src={{asset('images/icone-grafico.svg')}}>
                    </a>
                    <a 
                        data-template='
                        <div class="popover popover-share" role="tooltip">
                            <span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-share" aria-hidden="true"></span>
                            <div class="popover-arrow"></div>
                            <h3 class="popover-title"></h3>
                            <a class="avancar-sobre-compartihar" href="" target="_blank">
                                <img class="mosaico-share-icon" src={{asset("images/facebook.svg")}} ></img>
                                <u class="mosaico-share">&nbsp;Facebook</u>
                            </a>
                            <a class="avancar-sobre-compartihar" href={{$caminho}} target="_blank">
                                <img class="mosaico-share-icon" src={{asset("images/permalink.svg")}} ></img>
                                <u class="mosaico-share">&nbsp;Permalink</u>
                            </a>
                        </div>'
                        data-content=' ' class="icone-compartilhar" id="a3" style="cursor: pointer;" data-toggle="popover" data-placement="bottom">

                        <img src={{asset('images/icone-compartilhar.svg')}}>
                    </a>
                  </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

Next image of mosaic with popover by laravel blade:

Hereisajax,onlypartofthejavascriptfunctionthatisexecutedbychangingthevalueinthecombobox,iedynamic

$.ajax({type:'get',url:'populaMosaico',data:{'eixo':eixo,'uf':local,'lat':lat,'lng':lng},dataType:'json',success:function(data){try{vari=0;mosaico+='<divclass="row" style="margin: 0px;">'+
                   '<div id="outer">';  */     
          for(i in data){

        if(data[i].execucao_fisica != 100){
          var choice = 'progress-bar-warning progress-extra';
        }else{
          var choice = 'progress-bar-complete progress-extra';
        }

        if(data[i].obra.length > 50){                          
          if(data[i].obra[50] == ' '){
            obra = data[i].obra.slice(0, 50) + ' ...';
          }else{
            var resto = data[i].obra.slice(50, data[i].obra.length);
            if(resto.substring(0, resto.indexOf(' ')) != '')
              resto = resto.substring(0, resto.indexOf(' '));
            obra = data[i].obra.slice(0, 50) + resto + ' ...';
        }
       }else{
        obra = data[i].obra;
      }

      mosaico += '<div class="itemwrapper col-md-3 col-sm-3 col-xs-12" style="padding: 0px;">\n'+
                  '<img src="../images/mosaico/'+data[i].numF1+'-'+data[i].eixo+'-0'+data[i].numP1+'.png" alt="Imagem do empreendimento"/>\n'+
                  '<figcaption><a href="empreendimentos/'+data[i].idn_empreendimento+'/visualizar">'+obra+'</a>';

      if(data[i].distancia == null){
        var opt = data[i].cidade+','+data[i].estado;
        mosaico += '<span class="info-municipio">'+opt+'</span></figcaption>\n';
      }else{
        var opt = data[i].distancia;
        mosaico += '<span class="info-municipio"><span class="glyphicon glyphicon-screnshot"></span>'+opt+' KM</span></figcaption>\n';
      }

      mosaico +=  '<div class="mosaico-botoes">'+
                  '<a\n'+                            
                      'data-template=\'\n'+
                      '<div class="popover" role="tooltip">\n'+
                          '<span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-emp" aria-hidden="true"></span>\n'+
                          '<div class="dbw-map-location-container"  style="color:gray">\n'+
                              '<div class="dbw-map-location-info">\n'+
                                  '<div class="dbw-map-location-info-details">\n'+
                                      '<div class="empreendimento_estagio_titulo">ESTÁGIO DA OBRA</div>\n'+
                                        '<center>\n'+
                                          '<div class="progress progress-extra-2" sytle ="width: 90px;">\n'+
                                              '<div class="progress-bar '+choice+'" role="progressbar" aria-valuenow="'+data[i].execucao_fisica+'" aria-valuemin="0" aria-valuemax="100" style="width:'+data[i].execucao_fisica+'%">\n'+
                                              '</div>\n'+
                                          '</div>\n'+
                                          '<div class="row" style="text-align: left;margin-bottom: 20px;">\n'+
                                              '<div class="col-md-6" style="border: 0;">\n'+
                                                  '<STRONG style="font-size: 24px" class = "empreendimento_perc_exec">'+data[i].execucao_fisica+'%&nbsp;•&nbsp;</STRONG>\n'+
                                              '</div>\n'+
                                              '<div style="font-size:14px;border: 0;padding-top: 14px;" class ="empreendimento_perc_status col-md-6">\n'+
                                                  data[i].estagio+
                                              '</div>\n'+
                                          '</div>\n'+
                                          '<div class="row" style="text-align: left;margin-bottom: 20px;">\n'+
                                              '<div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">\n'+
                                                  'INICIO<br>\n'+
                                                  '<u class="empreendimento_dates" style="font-size: 20.5px;">'+data[i].data_selecao+'</u>\n'+
                                              '</div>\n'+
                                              '<div style="border: 0;" class="empreendimento_inicio_title col-md-6 col-sm-6 col-xs-6">\n'+
                                                  'CONCLUSÃO<br>\n'+
                                                  '<u class="empreendimento_dates" style="font-size: 20.5px;">\n'+
                                                  ''+data[i].data_conclusao+'</u>\n'+
                                              '</div>\n'+
                                          '</div>\n'+
                                          '<center>\n'+
                                              '<a href="empreendimentos/'+data[i].idn_empreendimento+'/visualizar?ref=busca" class="btn btn-primary btn-xs btn-avancar">Saiba mais</a>\n'+
                                          '</center>\n'+
                                      '</center>\n'+
                              '</div>\n'+          
                            '</div>\n'+
                        '</div>\n'+
                    '</div>\'\n'+
                    'data-content=\' \' id="a3" style="cursor: pointer;width: 150px;" data-toggle="popover" data-placement="bottom" data-original-title data-title>'+
                      '<img src="../images/icone-grafico.svg">\n'+
                  '</a>\n'+
                  '<a \ndata-template=\'\n'+
                      '<div class="popover popover-share" role="tooltip">\n'+
                          '<span class="glyphicon glyphicon-triangle-top seta-pop seta-pop-share" aria-hidden="true"></span>\n'+
                          '<div class="popover-arrow"></div>\n'+
                          '<h3 class="popover-title"></h3>\n'+
                          '<a class="avancar-sobre-compartihar" href="" target="_blank">\n'+
                              '<img class="mosaico-share-icon" src="../images/facebook.svg"></img>\n'+
                              '<u class="mosaico-share">&nbsp;Facebook</u>\n'+
                          '</a>\n'+
                          '<a class="avancar-sobre-compartihar" href="#" target="_blank">\n'+
                              '<img class="mosaico-share-icon" src="../images/permalink.svg"></img>\n'+
                              '<u class="mosaico-share">&nbsp;Permalink</u>\n'+
                          '</a>\n'+
                      '</div>\n'+
                      'data-content=\' \' class="icone-compartilhar" id="a3" style="cursor: pointer;" data-toggle="popover" data-placement="bottom">\n'+
                      '<img src="../images/icone-compartilhar.svg">\n'+
                  '</a>\n'+
                '</div>\n'+
              '</div>\n';
    }
    /*mosaico += '</div>\n'+
              '</div>\n';*/
    $(document).find('#outer').html('');                       
    $(document).find('#outer').append(mosaico);

  }catch(err){
    alert("Nenhuma obra encontrado para o filtro");
    document.getElementsByClassName("avancar-header").style.display = 'none';
    removido = true;
    return;
  }                                    
 },
 error: function(){

 }
});

The mosaic generated looks like this:

The mosaic generated is aesthetically the same, but the popover does not work when you click one of the two buttons next to the location. Could someone help me?

    
asked by anonymous 24.10.2017 / 01:45

1 answer

0

I was able to solve by creating an onclick for each button. The error happens because the popover script looks at elements that were created when the page was created, after which it is necessary to call again something to accompany new elements created.

    
25.10.2017 / 17:22