Jquery works on console, but does not work on file

Question

I am running a test on a plugin in worpdress with form that has select , where when the user selects the option with "value:9" emits an Alert ("Working") and if it does not select the this option emits an Alert("Not working")but this code I made only works on the browser console, when I put it in the file does not work

I tried with several parameters of jquery, but did not succeed.

JQUERY CODE

$('.bookly-js-select-service').change(function(){
if($(this).val() == '9'){ 
alert("Funcionando");
} else {
  alert("Não funcionando");
}
});

HTML CODE

<select class="bookly-select-mobile bookly-js-select-service">
       <option value="">Escolher serviço</option>
       <option value="9">Avaliação Clínica</option>
       <option value="10">Avaliação de retorno ao trabalho</option> 
        <option value="11">Exame Toxicológico</option>
</select>

*****I changed my jQuery code ***** But even then I did not succeed, even appears on the console, but the condition of if, no.

jQuery(document).ready(function($){
  var eleLists = jQuery('.bookly-js-select-service:visible');
  console.log(eleLists.length);
  if(eleLists.length > 0){
    jQuery(eleLists[0]).change(function($){
    if(jQuery(this).val() == '9'){
    alert("Funcionando");
    } else {
      alert("Não funcionando");
    }
    });

  }
  else
  {
    console.log("Componente ainda não foi carregado!!");
  }



});

[![insert image description here][1][1]

Answer 1

Try this and see if it works.

I used the

Document Ready.

with a $ in Rameter (see the post here)

to make sure the element will exist when assigning the function to the change event (because I believe this is the most likely problem). And also the

:Visible

to get only the visible component on the screen.

There is also a pluggin on your page that loads the components, so Document.Ready will not be enough. Until you have a plug-in solution, you can use Setinterval. See the example.

Remember to clear the browser cache

var intervalId = 0;

function addEventChange(){
    var eleLists = $('.bookly-js-select-service:visible');
      console.log(eleLists.length);
      if(eleLists.length > 0){  
      console.log("Agora Deu Bom!!!");
        clearInterval(intervalId);
        $(eleLists[0]).change(function(){
        if($(this).val() == '9'){ 
        alert("Funcionando");
        } else {
          alert("Não funcionando");
        }
        });

      }
      else
      {
        console.log("Componente ainda não foi carregado!!");
  }
}

$(document).ready(function($){
  
intervalId = setInterval(addEventChange, 1000);
  

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="bookly-select-mobile bookly-js-select-service">
       <option value="">Escolher serviço</option>
       <option value="9">Avaliação Clínica</option>
       <option value="10">Avaliação de retorno ao trabalho</option> 
        <option value="11">Exame Toxicológico</option>
</select>

<div style="display:none;">
<select class="bookly-select-mobile bookly-js-select-service">
       <option value="">Escolher serviço</option>
       <option value="9">Avaliação Clínica</option>
       <option value="10">Avaliação de retorno ao trabalho</option> 
        <option value="11">Exame Toxicológico</option>
</select>
</div>

This is your code in WP. Note that the script is before the component is built and without "Document ready.".

Answer 2

Check the order of reading the files, Wordpress has a lot of these problems, where you are editing may be being loaded even before any jQuery, these scripts is good to put so that they are read later.

You can do something like:

function carregarScript(){
    wp_register_script( 
        'meuScript', 
        get_template_directory_uri() . '/js/meuScript.js', 
        array( 'jquery' )
    );
    wp_enqueue_script( 'meuScript' );
}

add_action('wp_enqueue_scripts', 'chargeScript'); The jQuery dependency needs to be an array(), not just a string. This will force your script to load after jQuery.

'jquery' is required Na wp_register_script function. It tells Wordpress that jQuery is required for this script to run, so it will be loaded accordingly. In wp_enqueue_script that is not necessary, because WP already knows the dependencies of before.