Erreur jQuery, uniquement avec l'Explorateur

Question

J'ai un script jQuery personnalisé qui fonctionne correctement dans tous les bowsers sauf un (Explorer 6, 7, 8?).

Le but du code est de permettre à un utilisateur d'ajouter plusieurs champs de formulaire à son formulaire (si l'utilisateur souhaite plus d'un numéro de téléphone ou plus d'une adresse Web).

Il est écrit que toute balise "A" avec une classe contenant "add" est liée à la fonction jQuery.

L'erreur que je reçois est la suivante:

/////////////////////////////// 
Line: 240 
Char: 5 
Error: 'this.id.3' is null or not an object 
Code: 0 
/////////////////////////////// 

HTML de la forme: (s'il vous plaît noter que je suis conscient que les balises de formulaire ne sont pas ici, c'est une petite partie d'une plus grande forme.

<ul> 
<li> 
    <ul> 
    <li class="website"> 
     <input id="website1_input" name="website[1][input]" type="text" value="www.test.org"/> 
     <input type="checkbox" id="website1_delete" name="website[1][delete]" class="element radio" value="1" /> 
     <label for="website1_delete">Delete</label>  
    </li> 
    </ul> 
    <a href="#" id="addWebsite">add another website</a> 
    </li> 
</ul> 

Et maintenant, le jQuery.

Il devrait y avoir sur une page un ul contenant au moins un li Tous les lis devraient avoir un certaine classe comme "téléphone" ou "adresse" Après le/ul Il devrait y avoir un lien avec un id correspondant, comme "addPhone" ou "addAddress". L'attribut href devrait être "#".

function makeAddable(theClass) { 
    $('#add' + theClass[0].toUpperCase() + theClass.substr(1)).click(function() { 
    var numItems = $('.' + theClass).length; 
    var newItem = $('.' + theClass).eq(numItems - 1).clone(); 
    newItem.find('input[type=text]').val(''); 
    numItems++; // number in the new IDs 

    // keep ids unique, linked to label[for], and update names 
    // id & for look like: phone1_type, phone1_ext, phone13_p1, etc. 
    // names look like: phone[1][type], phone[1][ext], phone[13][p1], etc. 
    newItem.find('[id^=' + theClass + ']').each(function(i) { 
     var underscoreIndex = this.id.indexOf('_'); 
     var idNum = this.id.substring(theClass.length, underscoreIndex); 
     this.id = this.id.replace(idNum, numItems); 
    }); 
    newItem.find('[for^=' + theClass + ']').each(function(i) { 
     var jqthis = $(this); 
     var forAttr = jqthis.attr('for'); 
     var underscoreIndex = forAttr.indexOf('_'); 
     var idNum = forAttr.substring(theClass.length, underscoreIndex); 
     forAttr = forAttr.replace(idNum, numItems); 
     jqthis.attr('for', forAttr); 
    }); 
    newItem.find('[name^=' + theClass + ']').each(function(i) { 
     var jqthis = $(this); 
     var nameAttr = jqthis.attr('name'); 
     var bracketIndex = nameAttr.indexOf(']'); 
     var idNum = nameAttr.substring(theClass.length + 1, bracketIndex); 
     nameAttr = nameAttr.replace(idNum, numItems); 
     jqthis.attr('name', nameAttr); 
    }); 

    $(this).prev('ul').append(newItem); 
    return false; 
    }); 
} 

// Automatically enable all <a href="#" id="addSomething"> links 
$(function() { 
    $('a[href=#][id^=add]').each(function(i) { 
    makeAddable(this.id[3].toLowerCase() + this.id.substr(4)); 
    }); 
}); 

Answer 1

this.id.charAt(3).toLowerCase() 

Answer 2

Modifier cette ...

this.id[3] 

A cette ...

this.id.substr(3, 1); 

Answer 3

Quelque chose comme ceci permettra d'atteindre le même effet, mais fait une plus grande utilisation de jquery, ainsi éviter les problèmes de compatibilité avec les navigateurs communs avec javascript:

function addInput(inputType) { 
    var items, itemNumber, lastItem, newListItem, parentList, inputName, inputId, deleteId, thisId; 

    items = $('li.' + inputType); 
    itemNumber = items.length + 1; 
    lastItem = $(items[itemNumber-2]); 
    newListItem = lastItem.clone(); 
    parentList = lastItem.parents('ul:first'); 

    inputId = inputType + itemNumber + '_input'; 
    deleteId = inputType + itemNumber + '_delete'; 

    $(':input', newListItem).each(function() { 
     inputName = $(this).attr('name').replace(/\[\d*\]/, '['+itemNumber+']'); 
     thisId = $(this).attr('id').match(/_delete/) ? deleteId : inputId 

     $(this) 
      .val('') 
      .removeAttr('checked') 
      .attr('id', thisId) 
      .attr('name', inputName) 
     }).end() 
     .find('label').attr('for', deleteId).end() 
     .appendTo(parentList) 
    ; 
} 

$(function() { 
    $('a[href=#][id^=add]').live('click', function() { 
     addInput(this.id.substr(3).toLowerCase()); 
    }); 
});