Onclick does not work after div receive content from another div

Asked

Viewed 52 times

0

<script>

    $( document ).ready( function ( e ) {

        $( "#idRegiao" ).on( "change", function () {

            if ( $( "#idRegiao" ).val() != "" ) {

                $.ajax( {
                    url: "_scripts/_php/_contagens/contaAreas.php",
                    type: "POST",
                    dataType: "json",
                    data: {
                        idRegiao: $( "#idRegiao" ).val()
                    },
                    beforeSend: function () {
                        $( "#imgCarregando" ).css( 'display', 'block' );
                    },
                    success: function ( result ) {
                        $( "#imgCarregando" ).css( 'display', 'none' );

                        if ( result >= 3 ) $( "#conta" ).html( "<h1>Essa Regiao já possui  " + result + " Áreas!</h1>" );
                        else $( "#conta" ).html( $( "#escolhaArea" ).html() );

                    }

                } );

            } else $( "#conta" ).html( "<h1>Escolha a Região!</h1>" );

        } );


        if ( $( "#idRegiao" ).attr('type') == "hidden" ) $("#idRegiao").trigger("change");
    } );
</script>

<div id="conta"></div>
<div id="escolhaArea" style="display: none;">


    <label class="labelPequeno" for="idLider">Líder</label> :
    <select name="idLider" id="idLider" class="inputTextMedio required">
        <option value="" selected>Escolha o Líder</option>
        <option value=6>Celeste</option><option value=2>Cleonice</option><option value=9>Diana</option><option value=3>Jonas</option><option value=8>José</option><option value=10>Josias</option><option value=4>Tobias</option>       </select> <br/> <label class="labelPequeno" for="nome">Nome da Área</label> : <input type="text" class="inputTextMedio required" name="nome" id="nome" required/> <br/>
    <br/>
    <button id="buttonCadastrarArea" class="button">Cadastrar</button><br/>
    <img id="imgCarregando" style="display: none" src="_imgs/carregando.gif"/>
    <div class="resposta"></div>

</div>

After making

$( "#conta" ).html( $( "#escolhaArea" ).html() );

The 

<button id="buttonCadastrarArea" class="button">Cadastrar</button>

Stopped receiving the click.

Because?

NO ERRORS ON CONSOLE

jquery
  • 1

    Your code seems to have several problems, I will try to explain: If you are creating a "copy" of the HTML of one element in another does not mean that events and other things attached to the JS will be copied as well. You are creating a copy of an element that has ID, so you will have repeated Ids in your HTML, this is a sign that needs to change the strategy. PS: you could also mount a MCVE that reproduces the problem in a snippet and remove codes that are not part of the problem, such as the loading spinner. It is easier to help you

  • thanks for the tip. I understood the explanation and created the solution!

1 answer

0

Well, I solved:

I traded:

if ( result >= 3 ) $( "#conta" ).html( "<h1>Essa Regiao já possui  " + result + " Áreas!</h1>" );
else $( "#conta" ).html( $( "#escolhaArea" ).html() );

For:

if ( result >= 3 ) {
    $( "#conta" ).html( "<h1>Essa Rede já possui " + result + " Regiões!</h1>" );
    $( "#conta" ).css( "display", "block" );
    $( "#escolhaRegiao" ).css( "display", "none" );
} else {
    $( "#conta" ).css( "display", "none" );
    $( "#escolhaRegiao" ).css( "display", "block" );
}

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.