Refresh in Partialview loses Javascript reference?

Question

I have a Javascript/Jquery method that updates a Partialview and inside it there is a div with a fadeToggle associated.

Javascript in Onload (to associate Fadetoggle) (Works)

$("#ComentarioAba").click(function () {
    $("#Comentario").fadeToggle(500);
});

Javascript method:

function ReloadComentarios() {
    $('#Comentarios').empty();
    $('#Comentarios').load(document.URL + ' #ComentarioAba');

    $("#ComentarioAba").click(function () {
        $("#Comentario").fadeToggle(500);
    });
}

HTML code

<div id="Comentarios">
   <div id="ComentarioAba" class="col-md-12 mwTituloArea">
      <p>Comentários </p>
   </div>
   <div id="Comentario" class="col-md-12">
      <div class="col-md-12 ">
        ...
      </div>
   </div>
</div>

It happens that after the method ReloadComentarios is executed, the fadeToggle doesn’t work anymore. Even though the association is redone within the method itself.

Why does this occur?

Answer 1

In fact it does not lose the reference.

It turns out that Load only updates the ID Div #ComentarioAba comfort the call:

$('#Comentarios').load(document.URL + ' #ComentarioAba');

To correct it was necessary to "nest" another div and it was like this:

<div id="Comentarios">
   <div id="ComentariosReload">
      <div id="ComentarioAba" class="col-md-12 mwTituloArea">
         <p>Comentários </p>
      </div>
      <div id="Comentario" class="col-md-12">
         <div class="col-md-12 ">
           ...
         </div>
      </div>
   </div>
</div>

and then update Javascript to give Reload ComentariosReload:

$('#Comentarios').load(document.URL + ' #ComentarioAba');

Therefore, the Javascript reference was not getting lost, what was lost was the Div that was no longer loaded/processed and so Toogle would not work, since the DIV no longer existed.