Is there a tool to help organize multiple click events?

Asked

Viewed 32 times

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?

  • 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

  • Okay, I saw the html, but how are you using in jQuery?

  • added an example to my question

  • 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.

  • there are enough animation events, exchange classes etc

  • 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/

Show 2 more comments

1 answer

0

You can follow the following steps to organize your code.

1. Divide your code, modularize!

Divide your javascript according to the use of each function. Example: A JS file only for the functions of the XPTO component, another JS file only for the functions of the side menu and so on.

2. Simplify your code

Identify functions that do similar things and try to create a new, more generic function that can handle more than one case. This will eliminate those copy and glue functions that makes you have kilometric files.

3. Manage the dependencies

Now that you have several JS files, it can happen that one JS depends on another(s), to help you with this there are libs like Commonjs and Requirejs to import these files and improve the performance of your page. For a good explanation see this other answer What are AMD and Commonjs?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.