1
I have 1 problem, I am using JS to sort DIV’S (works correctly), the problem occurs when I click on the button "edit that same div", with the image becomes easier to preceber.
If I do not change the order, the edit button works correctly, in case organize the div by "ends in", the edit button stops working.
I played the problem in JSFIDDLE, you can try to click the edit button, and you will see that it will work, then click the change button "in blue bar", and the edit button will no longer work.
Any tips on how to solve my problem?
HTML
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<div class="tarefas col-md-12">
<div class="alertas col-md-12">
<div class="row">
<div class="tituloAlertas col-12 col-md-12">
<h1 style="color:#333333" class="tituloSessao"> Plano de Trabalhos </h1>
</div>
<div class="col-md-12 row main_alertas">
<div class="col-md-12 blue">
<div style="margin:0; padding:0" class="row">
<div style="width:5%">
</div>
<div style="width:55.6%">
</div>
<div style="width:15%">
<button style="margin-left: 5px;background: none; border: none; outline:none" href="#" class="pure-button sorte3"> Alterar</button>
<button style="display:none; margin-left: 5px; background: none; border: none; outline:none" href="#" class="pure-button sorte4"> Alterar</button>
</div>
</div>
</div>
<div class="col-md-12 sort-list todas-tarefas">
<div data-prioridade="1" data-id="1" data-tempo="-1" class="ordem-trabalhos row">
<div style="width:5%; padding-top:20px; padding-left: 5px;" class="conteudo">
</div>
<div style="width:56.6%;" class="conteudo">
<p class="ticket"><span style="color:#2197D2">#1 </span></p>
</div>
<div style="width: 30%; padding-top:5px;" class="conteudo">
<span style="font-size: 14px;"><b>Termina Em:</b> <br>
<span style="font-size: 15px; color: #52575D; font-family: 'Roboto', sans-serif;"> Tempo Esgotado </span>
</span>
</div>
<div style="width:10%; padding-top: 22px;" class="conteudo col-2 col-md-1">
<a class="btn_tabAlerta edit_alerta" data-title="Atenção!" title="Editar Tarefas/Alertas" id="editTarefa1">Editar</a>
</div>
</div>
<div data-prioridade="2" data-id="2" data-tempo="2" class="ordem-trabalhos row">
<div style="width:5%; padding-top:20px; padding-left: 5px;" class="conteudo">
<i style="color:orange" class="fas fa-exclamation-triangle"></i>
</div>
<div style="width:56.6%;" class="conteudo">
<p class="ticket"><span style="color:#2197D2">#2 </span></p>
</div>
<div style="width: 30%; padding-top:5px;" class="conteudo">
<span style="font-size: 14px;"><b>Termina Em:</b> <br>
<span style="font-size: 15px; color: #52575D; font-family: 'Roboto', sans-serif;"> 2 Dias </span>
</span>
</div>
<div style="width:10%; padding-top: 22px;" class="conteudo col-2 col-md-1">
<a class="btn_tabAlerta edit_alerta" data-title="Atenção!" title="Editar Tarefas/Alertas" id="editTarefa2">Editar</a>
</div>
</div>
</div>
</div>
JS/ Jquerry
$("#editTarefa1").on('click', (function(e) {
alert("entrou editar 1");
}));
$("#editTarefa2").on('click', (function(e) {
alert("entrou editar 2");
}));
var rooms = $('.ordem-trabalhos');
var roomList = $('.sort-list');
$( ".sorte3" ).click(function() {
console.log("entrou");
$(".sorte3").hide();
$(".sorte4").show();
sortAsc();
});
$( ".sorte4" ).click(function() {
$(".sorte4").hide();
$(".sorte3").show();
sortDesc();
});
function sortAsc(){
roomList.empty();
rooms.sort(function(a, b){
return $(a).data('tempo')-$(b).data('tempo')
});
roomList.append(rooms);
}
function sortDesc(){
roomList.empty();
rooms.sort(function(a, b){
return $(b).data('tempo')-$(a).data('tempo')
});
roomList.append(rooms);
}
Link JSFIDLE
Just change the way you capture the event. Use
$(document).on('click', "#editTarefa1", (function(e) {in place of$("#editTarefa1").on('click', (function(e) {. You are rewriting the HTML when you change the order, that is, these new elements were not in the DOM when you created the event, so he does not listen to them.– Sam
thank you very much, it worked correctly. ;)
– Ricardo