live change event handler on select element does not work
Although not (completely) new to jquery I am new to posting on this forum.
I came across a problem with attaching an event handler to a select element using the live() method and reported it as a bug, see
http://dev.jquery.com/ticket/6702. But, perhaps I should have posted here first to have others see if they can replicate the issue or tell me what I am doing wrong.
A very simple sample demonstrates the problem, see below. If a click handler is attached to an anchor element using live() *prior to* a change handler being attached to a select element using live(), then the change handler will "not work". If you just change the order of attachments, i.e. first attach the change handler to the select element and then the click handler to the anchor element, then the change handler does work.
Does not work:
- $(function() {
$('a').live('click', function() { alert('live click'); return false; });
$('select').live('change', function() { alert('live change'); return false; });
});
Works:
-
$(function() {
$('select').live('change', function() { alert('live change'); return false; });
$('a').live('click', function() { alert('live click'); return false; });
});
By the way, I made my observations using IE8. Am I doing something wrong or can you replicate this problem?
Complete sample:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
- </head>
- <body>
- <select><option value="0">Select 0</option><option value="1">Select 1</option></select>
- <br/>
- <a href="#">Click</a>
- <script type="text/javascript">
- $(function() {
- $('a').live('click', function() { alert('live click'); return false; });
- $('select').live('change', function() { alert('live change'); return false; });
- });
- </script>
- </body>
- </html>