Денис Инешин

Логично что 2 кнопки сабмит приводят вас к этой ситуации, так как по уму кнопка должна быть одна.
Чтобы исправить это, вы должны сделать иначе и перехватывать сабмит у самой формы, а не клик по кнопке. Примерно так: jsfiddle.net/IonDen/bxvwwp0r

$("#test").on("submit", function (e) {
    if(!confirm('Вы действительно хотите отправить форму?')) {
        e.preventDefault();
    }
});

Вот хороший: www.dropzonejs.com
А вообще, можно потыкать например тут: www.unheap.com/?s=upload

backbonejs.org/#Router и Backbone.history.start({pushState: true})

Но это всего лишь красивые урлы, реально при этом всё равно страницы строит JS, и поисковики лажают. Тут нужна серверная прегенерация. Гуглите в сторону изомрофных фреймворков.

Чтобы было более наглядно:

var a = 12; 
function b() { 
    var a; // новая переменная a внутри функции

    if (!a) { // выполнится всегда, так как a == undefined
        a = 9; 
    } 

    alert( a ); 
} 
b();

Вот так оно на самом деле работает, не важно где в теле функции вы объявили var a; и где присвоили ему значение, все равно он будет там.
Ну а чтобы добиться правильного результата, вам не нужно второй раз объявлять переменную.

var a = 12; 
function b() { 
    if (!a) { 
        a = 9; 
    } 

    alert( a ); 
} 
b();

А вот и ответ: stackoverflow.com/questions/275761/how-to-get-sele...

Во всех браузерах по разному, но традиционно считается что самый быстрый это getElementById.
getElementsByClassName - очень быстр, но появился только в IE9, так что если поддерживаем IE8, то его не используем.
querySelector/querySelectorAll - супер универсальный и очень неплохо оптимизирован в браузерах сегодня.

В остальном поищите тесты, аналогичные этому: https://jsperf.com/getelementsbyclassname-vs-query... или этому: https://jsperf.com/getelementsbyclassname-vs-query...
и посравнивайте в разных браузерах, а потом решите для себя.

ИМХО, в любом случае, производительность всех этих методов в современных браузерах очень очень высока, и вообще берите то что нравится больше.

jQuery тут вообще не причем, можно и на обычном JavaScript. Причем может быть несколько стратегий.

По проще:
1. Разбиваем огромную форму на части
2. Куски скрываем через CSS: {display: none}
3. Кнопки вперед/назад, просто скрывают предыдущий кусок формы и делают видимым следующий.
4. На самом последнем куске формы присутствует так же кнопка отправить.

По сложнее:
1. Опять же разбиваем форму на шаги
2. Показываем первый шаг формы
3. Когда пользователь нажимает далее, отправляем AJAX запрос на сервер с этими данными, и возвращаем HTML следующего шага (причем HTML может быть разный, в зависимости от того что выбрал пользователь в прошлом шаге)
4. Заменяем текущий участок формы новым HTML
5. И так далее.

Скорее всего вы не уничтожаете инстанс как положено. Попробуйте перед инициализацией делать такую проверку:

var old = $(value).data("ionRangeSlider");
if (old) {
    old.destroy();
}

$(value).ionRangeSlider({
    ...

UPD:
Тогда по другому, вот я сделал демо, в котором новый инстанс создается без удаления старого: jsfiddle.net/IonDen/7cs1L93s
Как видите, все работает нормально и новые значения присваиваются отлично. Значит проблема в другом, в том что вы берете значение так: from: $(value).val(), и там оно старое.

Можно и в массив.

var persons = [];

button.addEventListener("click", function () {
    persons.push(new Person("Вася"));
}, false);

Чтоб исполльзовать этот конструктор необходимо присвоить его переменной:

Это не присвоение конструктора, это создание нового инстанса.

Обратите внимание на ваши анимации. Они на самом деле запускаются одновременно. Чтобы выполнить последовательно, нужно использовать встроенный в анимации коллбэк.

Например вы показываете левую колонку:
$('.left-col').fadeIn(6000);
чтобы выполнить код после завершения этой анимации нужно сделать так:

$('.left-col').fadeIn(6000, function () {
    // этот коллбэк будет вызван после завершения анимации
});

Для этой задачи существует отличный плагин: imakewebthings.com/waypoints

Вообще-то .on тут не при чем. Это можно сделать двумя способами:
1. Кроссбраузерный. Каждый раз при добавлении элементов, вручную вызывать функцию заново. Скажем элементы у вас вставляет некая другая функция, так вот, в ту функцию поместите вызов своей.
2. Не очень кроссбраузерный. Реальное отслеживание изменений в DOM, в этом вам может помочь Mutation Observer, который в частности может отслеживать появление и удаление элементов из DOM.