Eu tenho um html e um script em Jquery que adiciona telefones a um cadastro de clientes dinamicamente. Estou tentando colocar máscaras de dois tipos diferentes para cada tipo de telefone que possa ser cadastrado. Porém ao percorrer os elementos inseridos dinamicamente não estou conseguindo recuperar o valor do select para saber qual máscara colocar.
Meu HTML:
<div class="container">
<h1>Olá, mundo!</h1>
<div class="form-group">
<label class="control-label">Telefones</label>
<div class="col-md-4 mb-2">
<button class="btn btn-primary" id="btn-add-telefone">Adicionar telefone</button>
</div>
<div class="col-md-8" id="div-telefones">
</div>
</div>
</div>
Meu script:
$(document).ready(function () {
var qtdTelefones = 0;
$("#btn-add-telefone").click(function (e) {
e.preventDefault();
var blocoTelefone = '<div class="row mb-2">' +
' <div class="col-md-2">' +
' <input type="cel" name="Telefones[' + qtdTelefones + '].DDD" maxlength="2" placeholder="DDD" class="form-control txt-ddd" />' +
' </div>' +
' <div class="col-md-6">' +
' <input type="text" name="Telefones[' + qtdTelefones + '].Numero" maxlength="9" placeholder="Número" class="form-control txt-numero" />' +
' </div>' +
' <div class="col-md-3 tipos-telefones">' +
' <select name="Telefones[' + qtdTelefones + '].tipoTelefone" class="form-control sel-tipo">' +
' <option value="0">Celular</option>' +
' <option value="1">Residencial</option>' +
' <option value="2">Comercial</option>' +
' </select>' +
' </div>' +
' <div class="col-md-1">' +
' <button class="btn btn-danger btn-remover-telefone">Excluir' +
' </button>' +
' </div>' +
'</div>';
$("#div-telefones").append(blocoTelefone);
qtdTelefones++;
$(".txt-numero").mask("99999-9999");
});
$("#div-telefones").on("change", ".sel-tipo", function () {
$(".tipos-telefones").each(function (indice, elemento) {
var opcao = $(".sel-tipo option:selected").val();
alert("Valor da repetição: " + indice + "elemento: " + elemento.innerHTML);
alert("Valor do drop: " + opcao);
});
});
});