Yuri Ramos Yuri Ramos - 1 month ago 6
jQuery Question

How to skip one fieldset in a multistep form on next step click

I've been wasting 2 entire days trying to solve this question. first of all, any help would be appreciated!

I have one multistep form (splitted by fieldsets) and when I click next they show the next fieldset and go back with previous button.

I have one button in the second fieldset that enables one aditional address, I've been facing some problems to skip this fieldset when I NOT click in this button.

I've tried to use the

next_fs = $(this).parent().nextAll().eq(3)
; to jump the fieldset of the aditional address but it seems not to work.

Now my approach is (I know it's not the best one but I'm trying to solve this problem) is when i click in this button to enable the aditional address I insertAfter() the whole content of the fieldset (declared in one string) into the DOM. But now the problem is the previous and the next button stopped to work!!

https://jsfiddle.net/byvxzb89/2/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Prototype UI - Teste DNA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700|Raleway:400,500,600,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row container-topo-compra">
<div class="col-lg-6 col-md-6 hidden-xs hidden-sm">
<div class="info">
<h1>Ambiente de compra e pagamento</h1>
<div class="spoilers">
Cadastre seus dados para que possamos finalizar a compra</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="header">
<i class="fa fa-lock locker" aria-hidden="true"></i><h3> Você está em um ambiente seguro </h3>
<p>Todas as informações aqui inseridas estão seguras e criptografadas.</p>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
<form class="steps" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<ul id="progressbar">
<li class="dados-pessoais active">Dados Pessoais</li>
<li class="endereco1">Endereços</li>
<li>Pagamento</li>
</ul>
<!-- USER INFORMATION FIELD SET -->
<fieldset id="dados-pessoais">
<h2 class="fs-title">Dados Pessoais</h2>
<h3 class="fs-subtitle">Nós precisamos de alguns dados para dar prosseguimento a esta compra</h3>
<div class="hs_firstname field hs-form-field">

<label for="firstname">Qual o seu primeiro nome? *</label>
<input id="firstname" name="firstname" required="required" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor inclue seu nome" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field">

<label for="email">Qual seu e-mail? *</label>
<input id="email" name="email" required="required" type="email" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor entre com email válido" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field hs_total_number_of_constituents_in_your_database">

<label for="password">Defina uma senha *</label>
<input id="password" class="form-text hs-input" name="password" required="required" size="12" maxlength="128" type="password" value="" placeholder="" data-rule-required="true" data-msg-required="Entre com valores válidos" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="hs_email field hs-form-field hs_total_number_of_constituents_in_your_database">

<label for="conf_password">Repita a senha *</label>
<input id="conf_password" class="form-text hs-input" name="conf_password" required="required" size="12" maxlength="128" type="password" value="" placeholder="" data-rule-required="true" data-msg-required="Entre com valores válidos" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="1" name="next" class="next action-button next-1" value="Proximo" />
</fieldset>
<!-- ENDEREÇOS FIELDSET -->
<fieldset id="endereco">
<h2 class="fs-title">Endereço</h2>
<h3 class="fs-subtitle"><i class="fa fa-info-circle font-big" aria-hidden="true"></i>Você pode optar por receber os kits de coletas em endereços diferentes</h3>
<button type="button" class="novo-endereco"><i class="fa fa-plus font-big" aria-hidden="true"></i>Novo Endereço</button>
<div class="relacaoKits">
<p> O que deseja enviar para esse endereço? </p>
<div class="kit kit01" data="1"><i class="fa fa-circle-o"></i>Kit 01: Suposta Mãe</div>
<div class="kit kit02 ativo" data="2"><i class="fa fa-check-circle"></i>Kit 02: Suposto Filho</div>
<div class="kit kit02 ativo" data="2"><i class="fa fa-check-circle"></i>Kit 03: Suposto Pai</div>
</div>
<div class="form-item " id="">

<label for="remetente1">Remetente</label>
<input id="remetente1" class="form-text hs-input" name="remetente1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Não é aceito valores em branco">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">

<label for="cep1">CEP</label>
<input id="cep1" class="form-text hs-input" name="cep1" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um número válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">

<label for="rua1">Rua/Av.:</label>
<input id="rua1" class="form-text hs-input" name="rua1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um endereço válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">

<label for="numero-complemento1">Número e complemento</label>
<input id="numero-complemento1" class="form-text hs-input" name="numero-complemento1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um valor válido">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">

<label for="bairro1">Bairro</label>
<input id="bairro1" class="form-text hs-input" name="bairro1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um bairro">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">

<label for="cidade1">Cidade</label>
<input id="cidade1" class="form-text hs-input" name="cidade1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira uma cidade válida">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">

<label for="UF1">UF</label>
<input id="UF1" class="form-text hs-input" name="UF1" required="required" size="60" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Unidade Federativa">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item" id="">

<label for="telefone1">Telefone</label>
<input id="telefone1" class="form-text hs-input" name="telefone1" required="required" size="11" maxlength="128" type="text" value="" placeholder="" data-rule-required="true" data-msg-required="Por favor insira um telefone">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="1" name="previous" class="previous action-button" value="Anterior" />
<input type="button" data-page="3" name="next" class="next action-button next-2" value="Proximo" />
</fieldset>

<!-- Pagamento FIELDSET -->
<fieldset id="pagamento">
<h2 class="fs-title">Cultivation and Nurturing your Donors</h2>
<h3 class="fs-subtitle">How have you been nurturing donors to get better donations?</h3>
<!-- Begin Average Gift Size in Year 1 Field -->
<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_1 field hs-form-field" id="edit-submitted-cultivation-amount-1 average_gift_size_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">

<label for="edit-submitted-cultivation-amount-1 average_gift_size_in_year_1-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">What was your average gift size in year 1? *</label>
<input id="edit-submitted-cultivation-amount-1" class="form-text hs-input" name="average_gift_size_in_year_1" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid number">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">

<label for="edit-submitted-cultivation-amount-2 average_gift_size_in_year_2-99a6d115-5e68-4355-a7d0-529207feb0b3_3256">What was your average gift size in year 2? *</label>
<input id="edit-submitted-cultivation-amount-2" class="form-text hs-input" name="average_gift_size_in_year_2" required="required" size="60" maxlength="128" type="number" value="" placeholder="" data-rule-required="true" data-msg-required="Please enter a valid number">
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
<input type="button" data-page="3" name="previous" class="previous action-button" value="Previous" />
<input type="button" data-page="3" name="next" class="next action-button" value="Confirmar Compra" />
</fieldset>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>


JS

/*
*
* Plug-ins: jQuery Validate, jQuery
* Easing
*/


$(document).ready(function() {
var fieldsetEndereco2="";
fieldsetEndereco2 += " <fieldset id=\"endereco2\">";
fieldsetEndereco2 += " <h2 class=\"fs-title\">Endereço<\/h2>";
fieldsetEndereco2 += " <h3 class=\"fs-subtitle\"><i class=\"fa fa-info-circle font-big\" aria-hidden=\"true\"><\/i>Você pode optar por receber os kits de coletas em endereços diferentes<\/h3>";
fieldsetEndereco2 += " <div class=\"relacaoKits\">";
fieldsetEndereco2 += " <p> O que deseja enviar para esse endereço? <\/p>";
fieldsetEndereco2 += " <div class=\"kit kit01\" data=\"1\"><i class=\"fa fa-circle-o\"><\/i>Kit 01: Suposta Mãe<\/div>";
fieldsetEndereco2 += " <div class=\"kit kit02 ativo\" data=\"2\"><i class=\"fa fa-check-circle\"><\/i>Kit 02: Suposto Filho<\/div>";
fieldsetEndereco2 += " <div class=\"kit kit02 ativo\" data=\"2\"><i class=\"fa fa-check-circle\"><\/i>Kit 03: Suposto Pai<\/div>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item \" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"remetente2\">Remetente<\/label>";
fieldsetEndereco2 += " <input id=\"remetente2\" class=\"form-text hs-input\" name=\"remetente2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Não é aceito valores em branco\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"cep2\">CEP<\/label>";
fieldsetEndereco2 += " <input id=\"cep2\" class=\"form-text hs-input\" name=\"cep2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"number\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um número válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"rua2\">Rua\/Av.:<\/label>";
fieldsetEndereco2 += " <input id=\"rua2\" class=\"form-text hs-input\" name=\"rua2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um endereço válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"numero-complemento2\">Número e complemento<\/label>";
fieldsetEndereco2 += " <input id=\"numero-complemento2\" class=\"form-text hs-input\" name=\"numero-complemento2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um valor válido\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"bairro2\">Bairro<\/label>";
fieldsetEndereco2 += " <input id=\"bairro2\" class=\"form-text hs-input\" name=\"bairro2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira um bairro\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"cidade2\">Cidade<\/label>";
fieldsetEndereco2 += " <input id=\"cidade2\" class=\"form-text hs-input\" name=\"cidade2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Por favor insira uma cidade válida\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"UF2\">UF<\/label>";
fieldsetEndereco2 += " <input id=\"UF2\" class=\"form-text hs-input\" name=\"UF2\" required=\"required\" size=\"60\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Unidade Federativa\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <div class=\"form-item\" id=\"\">";
fieldsetEndereco2 += " ";
fieldsetEndereco2 += " <label for=\"telefone2\">Telefone<\/label>";
fieldsetEndereco2 += " <input id=\"telefone2\" class=\"form-text hs-input\" name=\"telefone2\" required=\"required\" size=\"11\" maxlength=\"128\" type=\"text\" value=\"\" placeholder=\"\" data-rule-required=\"true\" data-msg-required=\"Insira um telefone\">";
fieldsetEndereco2 += " <span class=\"error1\" style=\"display: none;\">";
fieldsetEndereco2 += " <i class=\"error-log fa fa-exclamation-triangle\"><\/i>";
fieldsetEndereco2 += " <\/span>";
fieldsetEndereco2 += " <\/div>";
fieldsetEndereco2 += " <input type=\"button\" data-page=\"2\" name=\"previous\" class=\"previous action-button\" value=\"Anterior\" \/>";
fieldsetEndereco2 += " <input type=\"button\" data-page=\"4\" name=\"next\" class=\"next action-button\" value=\"Proximo\" \/>";
fieldsetEndereco2 += " <\/fieldset>";

var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;

$(".next-1").click(function() {

$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
rules: {
password: {
minlength: 6,
maxlength: 12,
},
conf_password: {
minlength: 6,
maxlength: 12,
equalTo: "#password"
},
telefone1: {
number: true
},
},
messages: {
email: {
email: " Por favor entre com um formato válido de e-mail",
},
password: {
minlength: "Por favor entre com no mínimo 6 caracteres",
maxlength: "Limite de 12 caracteres",
},
conf_password: {
equalTo: "As senhas são diferentes",
minlength: "Por favor entre com no mínimo 6 caracteres",
maxlength: "Limite de 12 caracteres",
},
telefone1: {
number: "Por favor insira um número de telefone",
},
},
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}

});
});


$(".next-1").click(function() {
$("#dados-pessoais").validate({

errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});

});


$(".novo-endereco").click(function() {
var endereco1 = $("#progressbar").find(".endereco1");
if ($(".novo-endereco").text() == "Novo Endereço") {
endereco1.text("endereço 1");
$("#endereco .fs-title").text("Endereço Principal");
$("<li class='endereco2'>Endereço 2</li>").insertAfter(endereco1);
$(fieldsetEndereco2).insertAfter("#endereco");
$(".novo-endereco").html("Desfazer");
previous_fs = $("#endereco");
next_fs = $("#pagamento");
} else {
$(".endereco2").remove();
$("#endereco2").remove();
endereco1.text("endereço");
$("#endereco .fs-title").text("Endereço");
$(".novo-endereco").html("<i class='fa fa-plus font-big' aria-hidden='true'></i>Novo Endereço");
// $("#endereco2").hide();

}
});

$(".kit").click(function() {
$(this).addClass("ativo");
if ($(this).hasClass("ativo")) {
$(this).children("i").toggleClass("fa-circle-o fa-check-circle")
// $(this).prepend("<i class='fa fa-check-circle'></i>");
}
});
$(".next").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
if ((!$('.steps').valid())) {
return true;
}
if (animating) return false;
animating = true;
current_fs = $(this).parent();

// if($(".endereco1.active").length > 0){
// if($('#endereco2').is(":visible") == true){
// next_fs = $(this).parent().next();
// }
// else {
// next_fs = $(this).parent().next(
// }
// }if($(".dados-pessoais.active").length > 0){
next_fs = $(this).parent().next();
console.log(next_fs);
// }
console.log(next_fs);
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
$(".submit").click(function() {
$(".steps").validate({
errorClass: 'invalid',
errorElement: 'span',
errorPlacement: function(error, element) {
error.insertAfter(element.next('span').children());
},
highlight: function(element) {
$(element).next('span').show();
},
unhighlight: function(element) {
$(element).next('span').hide();
}
});
if ((!$('.steps').valid())) {
return false;
}
if (animating) return false;
animating = true;
current_fs = $(this).parent();

next_fs = $(this).parent().next();

$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50) + "%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
previous_fs.show();
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
scale = 0.8 + (1 - now) * 0.2;
left = ((1 - now) * 50) + "%";
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
easing: 'easeInOutExpo'
});
});


});

Please validate the jsfiddle code in more than 675px of resolution

Answer

You should replace these lines (309):

$(".next").click(function() {

with this:

$(document).on("click",".next",function(){

and do the same for previuos:

$(".previous").click(function() {

>

$(document).on("click",".previous",function(){