Jquery code is not executed

Asked

Viewed 69 times

-1

I am following a tutorial to make an AJAX function that detects the change in a <select> to upload the information to another <select>. I did the same thing in the video, but mine’s not working.

<script type="text/javascript">
    $(document).ready(function() {
        $('#aluno_naturalidade_uf').on('change', function(){
            alert('Funcionou!');
        });
    });
</script>

I already put a breakpoint on the line $(document), but by clicking to pass the line it jumps straight to </script>. The imports of scripts from this template I’m using are as follows::

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

The video is this: https://www.youtube.com/watch?v=QTfPlTCsVME The code will be ready around 12:50.

Edit: After you jump to the line </script> appears this information in Scope: inserir a descrição da imagem aqui

jquery

  • Found an error in the console?

  • No error on console.

  • Can elaborate a [mcve] demonstrating in practice the behavior?

  • It is normal to debug go to </script> direct, because your code is asynchronous. The function you set in ready will be executed only when the DOM is loaded, not at the time it is scanned by the browser.

  • @Andersoncarloswoss I get it. But this point is not running when I switch choose another option in <select>

  • this script is at the end as the video shows? (before </body>)

  • @Anateixeira

  • Then develop the [mcve] demonstrating this behavior. With the site snippet, button </> from the editor, you can do this.

  • @Andersoncarloswoss How do I do this? I mean, where can I post this example?

  • Thanks for the help, I just detected the error. The id "aluno_naturalidade_uf" was duplicated

Show 5 more comments

1 answer

1


Exchange the document ready for document on. Try this:

$(document).on("change", "#opcao", function()  {
  alert($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="opcao">
<option value="1">Primeira opção</option>
<option value="2">Segunda opção</option>
</select>

Browser other questions tagged jquery

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