jQuery can't access a DOM element using ID but can with .class

I posted a similar question earlier and received some good suggestions. After further investigation, I found that the behavior is different enough to warrant a new question.

I am looking for suggestions as to the best way to debug some odd jQuery behavior.

The following code sample works as expected here when appending to the ul by either ID or class reference.

<input type="submit" id="submitID" value="ID" />
<input type="submit" id="submitClass" value="Class" />

<ul id="myList" class="myClass">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
</ul>

<script>
    $('#submitID').click(function(){
        $('#myList').append('<li>fourth list item</li>');
    });

    $('#submitClass').click(function(){
        $('.myClass').append('<li>fourth list item</li>');
    });
</script>

However, in my application, I am unable to append using the #myList ID reference and I can't figure out why. I am dynamically rendering the ul and li elements and I have tried, as suggested, to use the following approach instead of the click event:

<script>
    $('#submitID').live('click', function(){
        $('#myList').append('<li>fourth list item</li>');
    });

    $('#submitClass').live('click', function(){
        $('.myClass').append('<li>fourth list item</li>');
    });
</script>

In FireBug console, I can interact with the object using .myClass, but not #myList. For example, typing the following into FireBug console:

>>$('#myList').hide()

does not hide the #myList element as I would expect. The console simply returns [].

Any suggestions are appreciated.