jQuery : targetting id problem

Question

Hello,

I cannot target an element in jQuery.

First example which works :

$(document).ready(function()
{
    $('#Models').hide();
});

Second example which fails :

    $(document).ready(function()
    {
       $('#Make').bind('change',function()
       {
          $('#Models').hide();          
       });
    });

In this case, the "#Models" isn't hide at all. I cannot find any good solution. Is there any scoping issue ?

Thanks for any help or any clue!

This is a part of my code :

    <div class="search-row">
        <div class="search-flag">
        </div>
        <select id="Make" name="Make">
            <option value="">Marque</option>
            <?
            $marques = Marque::getList();
            foreach($marques as $m) {
            ?>
                <option value="<?=$m?>"><?=$m?></option>
            <? } ?>
        </select>
    </div>
    <br class="clear" />
    <div class="search-row">
        <div class="search-flag">
        </div>
        <script type='text/javascript'>
        $(document).ready(function()
        {
            $('#Make').change(function()
            {
                alert("test");
                $('#Models').hide();
            });           
        });
        </script>

        <select name="Models_name" id="Models">
            <option value="all">
                All
            </option>
        </select>
    </div>

(I only have one id called "Models" in all my code)

Answer 1

That looks like it should work - are you sure the '#Make' ID exists?

Give this a try:

$('#Make').change(function() {
  alert('change event!');
  $('#Models').hide(); 
});

Answer 2

Seems like the change handler of #Make is never triggered. What element type is #Make?

Answer 3

Can it be a caching issue? Your code runs fine here... Try checking the current html version, inspecting its source...