Question

I tried to bind on change event to the select tag with few options. If I’m binds it to select tag it’s not works. If I bind on click event to H1 tag and it’s works ok.

html

<div class="subtitle_block">
  <span>Резюме по разделам</span>
    <form name='region_filter' action='/jobseek/search_cv/' method='post'>                                                
      <select id="id_region" class="" name="region">
        <option value="" selected="selected">Все</option>
        <option value="3">Донецк</option>
        <option value="2">Киев</option>
        <option value="1">Харьков</option>
      </select>                    
    </form>
  <div class="clear_both"></div>
</div>

I tried like that

$(function(){
    console.log($('#id_region')); //this is works
    $('#id_region').bind('change', function(){console.log('asdf')}); //this is not works
});

And like that

$(function(){
console.log($('#id_region')); //this is works
$('#id_region').change(function(){console.log('asdf')}); //this is not works
});

Even like that

$(function(){
console.log($('#id_region')); //this is works
$('#id_region').click(function(){console.log('asdf')}); //this is not works
});

What is wrong in there?

Answer 1

Try putting your code inside $(document).ready():

$(document).ready(function() {
  console.log($('#id_region')); //this is works
  $('#id_region').change(function(){console.log('asdf')}); //this is not works
});

See this working jsfiddle