0
within my system there are many events, such as click, change etc.
Is there any tool that can help me in organizing these events?
$("#btn-save-sidebar").on("click",function(){});
$(document.body).on('click', '.remove-component' ,function(e){
var $thisComponente = $(this).closest(".component");
var $compContainer = $thisComponente.parent();
if (e.altKey){
$thisComponente.remove();
}
//mensagem de confirmação para deletar
else {
var q = confirm("Você tem certeza que quer remover o título?");
if (q == true) {
$thisComponente.remove();
}
//$thisComponente.remove();
}
var noOfComponents;
var components = $compContainer.find(".component");
noOfComponents = components.length;
if(noOfComponents === 0){
$compContainer.addClass("container-empty")
}
});
$(document.body).on("click",".btnadd-or-remove",function(){
_this = $(this);
var thisElement = _this.closest(".panel.form");
if (_this.val() === "+") {
var cloneDiv = thisElement.clone();
cloneDiv.insertAfter(thisElement);
setSortablesAndDraggables();
} else if (_this.val() === "x") {
thisElement.remove();
}
});
$("#btn-bla-bla").on("click",function(){});
...
//assim por diante
$("#btn-n").on("click",function(){});
<div class="panel ">
<div class="panel-heading">
<div class="row">
<div class="col-md-2">
<div class="text-center">
<label>
<div class="checkbox">
<input type="checkbox" style="display: none;" class="chk-hide-block" name="chk-hide-block"><i class="fa fa-eye fa-2x"></i>
Mostra Questão? <span class="text-esconder text-info"> <strong style="font-size: 20px;">Sim</strong> </span>
</div>
</label>
</div>
</div>
<div class="col-md-2">
<div class="text-center">
<label>
<div class="checkbox" >
<input type="checkbox" style="display: none;" class="chk-is-obrig" name="chk-is-obrig" checked>
<i class="fa fa-check-square-o fa-2x"></i> Questão obrigatória?
<span class="text-obrig text-danger"> <strong style="font-size: 20px;">Sim</strong></span>
</div>
</label>
</div>
</div>
<div class="col-md-2">
<button class="text-center alert alert-warning btn-condicional" data-toggle="modal" data-target="#myModal" data-condicional-json="">
<i class="fa fa-check-square-o fa-2x"></i> Condicional
</button>
</div>
<div class="col-md-4">
<div class="pull-right">
<span class="btn-group">
<button class="btnadd-or-remove btn btn-primary btn-sm form-control" value="+"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</span>
<span class="btn-group">
<button class="btnadd-or-remove btn btn-danger btn-sm form-control" value="x"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button>
</span>
<span class="btn-group mover-bloco-main">
<div class="btn btn-default"><i class=" fa fa-arrows"></i> [Mover]</div>
</span>
</div>
</div>
</div>
</div>
<div class="panel-body">
<ul class="nav">
<li class="col-md-5 dropdown">
<select class="info-tipo-perg form-control">
</select>
</li>
<li class="col-md-1 text-center">
<span class="btn-group">
<button class="btn-config btn btn-default btn-lg form-control"><i class="fa fa-cog"></i> </button>
</span>
</li>
</ul>
<ul class="nav">
<li class="col-md-1"></li>
<li class="col-md-5">
<div class="text-center alert alert-info">
<label>
<div class="checkbox">
<input type="checkbox" class="info-has-justifica" checked/>
</div>
</label>
</div>
</li>
<li class="col-md-5">
<div class="col-md-6">
<textarea class="info-header form-control" style="resize: none;" placeholder="Header"></textarea>
</div>
<div class="col-md-6"><label><input type="checkbox" class="info-is-ordered"> Ordenar</label></div>
</li>
</ul>
</div>
</div>
the code is only expanding and more and more difficult to organize.
Yes, there is, but it depends on what you want to do. You can give an example of how you use that code?
– Sergio
It is a dynamic menu. It is possible to add more menus, remove them, clone them, there are various animation click events, there are 2 drag and drop events etc
– Denali
Okay, I saw the html, but how are you using in jQuery?
– Sergio
added an example to my question
– Denali
Only one example the code is little == not extensive. You need to add more code or explain what you’re doing to make us understand the repetitions you might have and better ways to organize the code.
– Sergio
there are enough animation events, exchange classes etc
– Denali
If you don’t put together all the code you think is extensive, it’s hard to help, so we can only make small adjustments to the code and the question becomes uninteresting... https://jsfiddle.net/Lr9vnsht/
– Sergio