Ошибка jQuery, только с Explorer

Question

У меня есть собственный скрипт jQuery, который отлично работает во всех баузерах, кроме одного (Explorer 6, 7, 8?).

Целью кода является предоставление пользователю возможности добавлять в форму несколько полей формы (если пользователю требуется более одного номера телефона или более одного веб-адреса).

Он написан так, что любой тег «A» с классом, содержащим «add», связан с функцией jQuery.

Я получаю следующую ошибку:

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

HTML формы: (обратите внимание, что мне известно, что тегов форм здесь нет, это небольшая часть более крупной формы.

<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>

А теперь jQuery:

На странице должен присутствовать хотя бы один li. Все списки должны иметь определенный класс, такой как «телефон» или «адрес» После / ul должна быть ссылка с соответствующим идентификатором, например "addPhone" или "addAddress". Атрибут href должен быть "#".

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

Примерно так же будет достигнут тот же эффект, но он будет шире использовать jquery, что позволит избежать проблем совместимости между браузерами, которые часто встречаются в 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());
    });
});

Answer 3

Изменить это ...

this.id[3]

К этому ...

this.id.substr(3, 1);