Take the 2-minute tour ×

I have the following in the header:

$('body').on('change', '#userFilter', function(){

And this element is dynamically inserted on the page when a tab is clicked:

<select id="userFilter">

The problem is that when I change the dropdown nothing is shown in the console.

EDIT: As other guys pointed out, it seems that I had to wrap the jQuery in:


in order to make sure that the element is available before attaching a handler to it.

share|improve this question
Works fine for me: jsfiddle.net/KhY8s. Make sure you bind the event handler when body exists (jQuery 101). From the jQuery tutorial: "As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready. To do this, we register a ready event for the document.". Why does it seem no one is reading it? –  Felix Kling Aug 9 '12 at 14:44
Please tick the answer then :) –  Archer Aug 9 '12 at 15:00
add comment

2 Answers

up vote 6 down vote accepted

Wrap it in $(document).ready(function(){....}) so that the html control userFilter is available in the javascript

share|improve this answer
That fixed it. Thanks! –  WordPress Developer Aug 9 '12 at 14:50
You are welcome –  Adil Aug 9 '12 at 14:50
add comment

As Felix Kling mentioned, did you put it in


// your code here


share|improve this answer
Already been answered, exactly what you said but with more detail. Please read before posting answers in future. –  Archer Aug 9 '12 at 14:51
add comment

Your Answer


