Question

Using jQuery 1.7.1, I’m trying to create an event handler for the change event on a dropdown. The dropdown is dynamically added to the DOM. Seems to work nicely on most browsers, but oh that kooky IE8 wants to be difficult. Is there a workaround? Should this work? I’m doing a lot of reading here and elsewhere and the input seems to be conflicting in many cases and the proposed solutions that I’ve found/tried haven’t worked for me.

Can anyone clarify whether this should work in IE8 for .state-seletor dropdowns that are created on the fly?

$( document ).on( 'change', '.state-selector', function( e ) {
  e.preventDefault();
  alert( 'ON()' );
});

I’ll keep poking around, but if anyone can clear this up before I lose my mind, I’d appreciate it.

Thanks.

UPDATE

At @Wertisdk’s request below, here’s my dropdown snippet:

<select name="data[Contractor][service_area_state]" class="state-selector">
  <option value="">Select a state...</option>
  <option value="AK">Alaska</option>
  <option value="AL">Alabama</option>
  ...
  <option value="WI">Wisconsin</option>
  <option value="WV">West Virginia</option>
  <option value="WY">Wyoming</option>
</select>

UPDATE 2

To @mblase75’s point, maybe the method used to generate the dynamic dropdown matters. Essentially, I’m cloning an existing DOM node and emptying the value that was selected there. It should be noted that the .additionalink a is also generated dynamically. When you click an .addtionallink a, the template being cloned includes a new .addtionallink a node:

$( document ).on( 'click', '.additionallink a', function( e ) {
  e.preventDefault();

  var copy = $( this ).closest( '.template' ).clone();

  // Massage the template copy's content and insert it
  // - Clear the value selected in the original dropdown
  // - Clear the list of counties loaded based on the original dropdown selection
  $( '.state-selector', copy ).val( $( '.state-selector option:first', copy ).val() );
  $( '.counties', copy ).empty();
  $( this ).closest( '.template' ).after( copy );
});

UPDATE 3

Here’s a similar JSFiddle. It’s almost my code, but there’s one key difference that might be all the difference. This fiddle uses .append() to insert new content based on the state selection. My code uses the .load() method. Otherwise, it’s all the same.

Answer 1

I think the magic word here is .clone(), you may be running into this bug which has already been fixed in the 1.7.2 beta: http://bugs.jquery.com/ticket/11076