Why is my jquery .on('change') not working for dynamically added selects
jquery
Solution
Your code:
$('#x select').on('change', function () { alert('helo'); })
attaches an event handler to the select inside the #x element.
What you want (from what i understood) is something in the lines of:
$("#y").on('change','select',function () { alert('helo'); });
This attaches an event handler to the #y element that gets delegated to its children 'select' elements
From http://api.jquery.com/on/
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.
Problem
I'm adding select elements dynamically, like in the below HTML. I'm not sure why the .on('change' ...) is not working for the dynamic select. What am I missing? I'm using Chrome 24.0.1312.57 + jquery 1.8.3. ``` <script type="text/javascript"> $(document).ready(function() { $('#x select').on('change', function () { alert('helo'); }) $('#y select').on('change', function () { alert('helo'); }) $('#x').html($('#y').html()); }); </script> <div id="x"></div> <div id="y"> <select> <option>O1</option> <option>O2</option> </select> </div> ```