JQuery code does not run [closed]

Navigation
-1

I'm following a tutorial to do an AJAX function that detects the change in a <select> to load the information into another <select> . I did the same thing on the video, but mine is not working. 

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

I have already put a breakpoint in the $(document) line, but clicking to pass the line it jumps straight to </script> . Imports of the scripts from this template I'm using are as follows: 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><scriptsrc="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>

Thevideoisthis: link The code is ready by 12:550.

Edit: After skipping to the </script> line this information appears in scope:

    
asked by anonymous 08.11.2018 / 15:34

1 answer

1

Change 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><selectid="opcao">
<option value="1">Primeira opção</option>
<option value="2">Segunda opção</option>
</select>
    
08.11.2018 / 17:05
Creation of JSON with numeral Error: Object reference not set to an instance of an object