Jquery - Problems with checkbox editing function

Asked

Viewed 50 times

0

I have a problem with the function of the edit button. I can edit the first word correctly, but when I click edit a checkbox, I edit this text. The other textp is also edited. And so on. All texts are edited instead of just the text that was clicked. 

<body>

        <section> 
            <h2>Check Box</h2>
            <div id="lista">
                <form>
                    <div>
                        <input id="teste" name="teste" type="checkbox" class="normal">
                        <label for="teste"  >Teste</label>             
                        <a class="remove" href="#">Remover</i></a> 
                        <a class="edit" href="#">Editar</i></a>


                    </div>
                </form>
            </div>

            <div class="add_box"> 
                <input id="adicionarTxt" type="text">
                <button id="adicionarBtn">Adicionar</button>
            </div>
            <div class="edit_box"> 
                <input id="editarTxt" type="text">
                <button id="editarBtn">Editar</button>
                <button id="backBtn"><i class="fas fa-undo"></i></button>
            </div>

             <div class="controler"> 
                <button id="checkAll">CheckAll</button>
                <button id="Uncheck">Uncheck all</button>
                <button id="inverter">Inverter Seleção</button>  
            </div>
        </section>

        <script src="jquery-3.4.1.min.js"></script>
        <script src="app.js"></script>
    </body>

//-----------------------------Adicionar Elemento 
var cont=0;
$('#adicionarBtn').on('click', function(){
    if ($('#adicionarTxt').val()) {
    var conteudo = $('#adicionarTxt').val().padStart(25, " ");
    /*$('#lista form').append('<div><input id="'+ cont +'" type="checkbox" name="'+ cont +'" class="normal"><label for="'+ cont +'" data-target="'+ cont +'">'+ conteudo +'</label><a class="remove" href="#"><i class="far fa-trash-alt"></i></a><a class="edit" href="#" data-click="'+ cont +'"><i class="fas fa-pencil-alt"></i></a>');*/
     $('#lista form')
     .append($('<div>')
            .append($("<input>", {
                    id: cont,
                    type: "checkbox",
                    name: cont,
                    class: "normal"}))
            .append($("<label>", {
                    for: cont,
                    "data-target": cont,
                    text: conteudo}))
            .append($("<a>", {
                    class: "remove",
                    href: "#"})
            .append($("<i>", {class: "far fa-trash-alt"})))
            .append($("<a>", {
                    class: "edit",
                    href: "#",
                    "data-click": cont})
            .append($("<i>", {class: "fas fa-pencil-alt"}))));
    console.log(conteudo + " Adicionado!");
    salvarLocalStorage();
    $("#adicionarTxt").val("");
    cont++;
  }
});

//-----------------------------Editar Elemento 
$(document).on('click','.edit',function(){
    var $target = $(this).prev().prev();  



    $('.add_box').hide();
    $('.edit_box').show();

    $(document).on('click','#editarBtn', function(){
        var edit = $('#editarTxt').val();

        $target.text(edit);
        $('.edit_box').hide();
        $('.add_box').show();
    })

    $('#backBtn').on('click',function(){
        $('.edit_box').hide();
        $('.add_box').show();
    })

});
jquery

  • The code only shows a checkbox.

  • I think you’re confusing the terminology within IT jargon. I understand that the verb edit for some professions means delete and for others means produce, within the jargon of computer science means making modifications. From a revised text of your question, as it is vague.

  • I modified the question by adding the "Add" function, I believe you are now right.

1 answer

1


When using .on() inside .on() will create and accumulate the .on() nestled each time the .on() is triggered, i.e., by clicking .edit the first time will create the two events .on() nested. In the second click will create two more, and in the third click the event in $(document).on('click','#editarBtn'... and the $('#backBtn').on('click'... will be fired twice and so on.

This is why it is ideal to use separate, non-nested handlers. In your case, it is noticeable that you did this because of the variable $target, which is generated in the $(document).on('click','.edit'... and used in $(document).on('click','#editarBtn'....

In this case, you can fix the working using the method .one() in place of .on() in nested handlers Vent, because the .one() is only executed 1 time, which prevents memory accumulation and these events are triggered more than once:

$(document).on('click','.edit',function(){
    var $target = $(this).prev().prev();  

    $('.add_box').hide();
    $('.edit_box').show();

   $(document).one('click','#editarBtn', function(){ // .one()
     var edit = $('#editarTxt').val();

     $target.text(edit);
     $('.edit_box').hide();
     $('.add_box').show();
   })

   $('#backBtn').one('click',function(){ // .one()
     $('.edit_box').hide();
     $('.add_box').show();
   })

});

Browser other questions tagged jquery

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