如何在下一步单击时跳过多步骤表单中的一个字段集
How to skip one fieldset in a multistep form on next step click
我已经浪费了整整2天的时间来解决这个问题。首先，任何帮助将是感激的!
我有一个多步骤的形式(由字段集分割)，当我点击下一步，他们显示下一个字段集，并回到上一个按钮。
我有一个按钮在第二个字段集，启用一个额外的地址，我一直面临一些问题，跳过这个字段集，当我不点击这个按钮。
我已经尝试使用next_fs = $(this).parent().nextAll().eq(3);要跳过额外地址的字段集，但似乎不工作。
现在我的方法是(我知道这不是最好的，但我试图解决这个问题)是当我点击这个按钮启用额外的地址我insertAfter()字段集的整个内容(在一个字符串中声明)进入DOM。但现在的问题是前一个和下一个按钮停止工作!!
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'
});
});
});
请验证分辨率超过675像素的jsfiddle代码
根据jquery文档:
.on()方法将事件处理程序附加到当前选定的集合的元素
换句话说，当您向页面添加动态内容时，.on()方法就像event listener方法一样工作。在jQuery 1.7之前使用了.live()方法，但已被弃用。
你应该替换这些行:
$(".next").click(function() {
$(document).on("click",".next",function(){
和前面的操作相同:
$(".previous").click(function() {
与
$(document).on("click",".previous",function(){
相关文章：
- 而循环只设置php中输入字段中的第一个值
- 从Rally获取一个特定的标记，以便计算另一个字段中的值
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 在输入字段上有两个函数调用，一个在Blur上，一个不在Angular中
- Angular ng repeat order将多个字段作为一个字段
- 如何将Date字段设置为等于另一个Date+Int值，该值表示月份值
- 我怎么能让流星简单模式中的一个字段等于一个js变量，并且仍然让用户填写简单模式的其余部分
- 如何限制一个字段只接受4个数字字符作为输入，并获得'It’这是潜水警报
- 可以't无法将一个字段复制到另一个字段
- 创建一个带有可变字段的json对象
- 如何隐藏&使用jQuery禁用依赖于另一个字段值的字段
- 简单的Javascript方式，在输入字段的每5位数字后添加一个空格
- 为什么regex只验证字段中的一个字符，而不是所有输入的字符
- 如何在单击时从输入字段中删除最后一个字符
- 我有一个字段计算，如果结果低于 60，则需要显示最小值
- 当用户单击按钮(在光标位置）时，在输入字段中添加一个文本字符串
- javascript绑定另一个select2输入字段rails的select2 inputonchange事件的数据
- 在页面的页脚处添加了一个额外的输入字段
- jQuery将输入集中在下一个tr->td时，td包含一个输入字段，但从不关注html选择
- 给一系列克隆复选框字段一个唯一名称的困难- javascript
