clone and change onchange arguments doesn't work in IE

Question

I have a table on my form that has one or more rows, each one of which contains some <select > and <input> fields which have onchange handlers that contain the id of the containing tr , as in

<select id="System_row_0_environment" class="fixedwidth" 
  onchange="changeAccessSystem('System_row_0', 'environment')" name="System_environment">

I want to clone one of the rows, and update the ids and the calls to the onchange handlers. (idGlob is a global variable with the count of the number of rows)

function cloneLine(previd) {
  var id = '<% $prefix %>_row_' + idGlob;
  idGlob++;

  var $prevLine = jQuery('#' + previd);

  var prevId = $prevLine.attr('id');

  var regExp = new RegExp(prevId, 'g');

  var replaceIdFunction = function(row, attr) {
    if (attr) {
      return attr.replace(regExp, id);
    }
  };

  var $newLine = $prevLine.clone();
  $newLine.attr('id', id).find('*').each(function(index, element) {
     jQuery(element).attr(
     {
        'id': replaceIdFunction,
        'onchange' : replaceIdFunction,
        'for' : replaceIdFunction,
        'onclick' : replaceIdFunction
     })
  });

  // XXX This is a work-around for a bug in Firefox.  Clone is supposed to
  // copy the value, but it doesnt for select and textarea!
  // https://bugzilla.mozilla.org/show_bug.cgi?id=230307
  $prevLine.
    find('select,textarea').each(function(index, element) {
        var $element = jQuery(element);
        var name = $element.attr('name');
        $newLine.find('[name="' + name + '"]').val(
            $element.val());
    });

  $prevLine.after($newLine);
}

This works nicely in all the usual suspects (Chrome, Firefox, Safari) but on IE for some odd reason, even if you inspect the element with Firebug Lite and it shows the clone having onchange="changeAccessSystem('System_row_1', 'environment') , when you change it, the changeAccessSystem function gets called with the first argument being 'System_row_0'. It doesn't seem to matter whether I call .clone with true or false either.

Answer 1

Had this kinda trouble with IE before myself. 2 solutions I found. First, remove the function from the inline "onchange" event on you selects. Instead, use jQuery/JavaScript to add the event. Such as:

$("select").change(function(e) { // do work ....

Second, in older IE's, the change/onchange event doesn't fire properly. Thus you have to get crafty with the "propertychange" event. Like so:

$('select').bind($.browser.msie ? 'propertychange': 'change', function(e) { // do work

Of course, you can then just call your function in the event function and set parameters as needed based on which element is calling the binded event. You could also use .each, if you wanted a specific count or grab parent tr index for specific row number, or etc ....

Hope this helps, if need more example, just hit this post in comment