Question

EDIT: The problem is that I used .select() instead of .find();

I have this simple jQuery code (jsfiddle: http://jsfiddle.net/periklis/znstj/)

<div class = "someclass"><button class = "myclass">clickme</button></div>
<script>
$(document).ready(function() {
    $('.someclass').select('.myclass').bind('click', function() { console.log('red'); });    
    $('.myclass').bind('click', function() { console.log('green'); });
});
</script>

Why on earth does "green" always print before "red"? (and how would I change this to make ‘red’ appear before ‘green’?)

Answer 1

As written, your .select() call is a no-op – in jQuery it’s used to register a handler for the onselect event!

Since .select() is a chaining function that returns the original object on which it was called, the result is that you’ve bound the first click handler to the outer .someclass div.

What you’re therefore seeing is the effect of bubbling, the click is hitting the button first (“green”) and then bubbling up to its parent (“red”), in that order.

If the intent of your .select() call was to bind the first click handler just to the button, then you should have used .children('.myclass') instead.