Home / Questions / 134756
Accepted
Alberto Julio Arce Escolar
Asked: 2020-01-30 19:18:46 +0800 CST 2020-01-30 19:18:46 +0800 CST

Why is a value returned multiple times in this code?

  • 772

ProductCode2 returns a value several times.

totalventa=0;

$(".agregar").click(function(){

    codigoproducto =$(this).parent().parent().children(".codigoproducto").html();
    nombreproducto =$(this).parent().parent().children(".nombreproducto").html();
    precio = $(this).parent().parent().children(".precio").html();
    cantidad = $(this).parent().parent().children().children(".cantidad").val();
    total=precio*cantidad;
    totalventa=totalventa+total;
    $(".totaltemp").val(totalventa);

    $(".agregarproducto").before(' <tr class="trjson"><th class="codigoproducto">'+codigoproducto+'</th><th class="cantidad">'+cantidad+'</th><th class="nombreproducto">'+nombreproducto+'</th><th class="precio">'+precio+'</th><th class="total">'+total+'</th><th><a href="#" class="eliminardetalle" data-toggle="modal" ><span  class="glyphicon glyphicon-remove"></a></th></tr>');

    $(".agregarproducto").html('<tr><td></td><td></td><td></td><td><strong>SUBTOTAL $</strong></td><td>0</td></tr><tr><td></td><td></td><td></td><td><strong>IVA $</strong></td><td>0</td></tr><tr><td></td><td></td><td></td><td><strong>TOTAL $</strong></td><td>'+totalventa+'</td></tr>');

    $(".eliminardetalle").one('click', function() {
        $(this).parent().parent().remove();
        codigoproducto2=$(this).parent().siblings(".codigoproducto").html();
        console.log(codigoproducto2);
    });


});

With agregarI create a product in a table, and in that table I want to delete the product and it effectively deletes it.

However, that variable returns the value of the code that I remove.

The product that I added first prints the variable once, if I assign a second product and remove it, it returns me twice and so on.

I don't know if this is correct but I think that beforewhen I create the products it does something.

totalventa=0;


      $(".agregar").click(function(){



    codigoproducto =$(this).parent().parent().children(".codigoproducto").html();
    nombreproducto =$(this).parent().parent().children(".nombreproducto").html();
    precio = $(this).parent().parent().children(".precio").html();
    cantidad = $(this).parent().parent().children().children(".cantidad").val();
    total=precio*cantidad;
    totalventa=totalventa+total;
    $(".totaltemp").val(totalventa);

    $(".agregarproducto").before(' <tr class="trjson"><th class="codigoproducto">'+codigoproducto+'</th><th class="cantidad">'+cantidad+'</th><th class="nombreproducto">'+nombreproducto+'</th><th class="precio">'+precio+'</th><th class="total">'+total+'</th><th><a href="#" class="eliminardetalle" data-toggle="modal" ><span  class="glyphicon glyphicon-remove"></a></th></tr>');

    $(".agregarproducto").html('<tr><td></td><td></td><td></td><td><strong>SUBTOTAL $</strong></td><td>0</td></tr><tr><td></td><td></td><td></td><td><strong>IVA $</strong></td><td>0</td></tr><tr><td></td><td></td><td></td><td><strong>TOTAL $</strong></td><td>'+totalventa+'</td></tr>');

});

    $(".trjson").on("click", ".eliminardetalle", function(){
    $(this).parent().parent().remove();
    codigoproducto=$(this).parent().siblings(".codigoproducto").html();
    console.log(codigoproducto);
});

This way you don't delete the products you assign with before add trjson which I guess is a close selector

This is where I assign the products with the before the "X" is where the deletedetail event is activated

enter image description here

<div id="page-content-wrapper">
    <div class="container-fluid">
        <a href="#menu-toggle" id="menu-toggle" class="menu-toggle"><div class="botonmenu">SoftCont</div></a>
    </div>
</div>

<div class="container">
<div class="row">
<div class="table-wrapper" class="col-sm-12">
    <div class="table-title">
        <div class="row">
            <div class="col-sm-6">
                <h3>Nueva Factura</h3>
            </div>

        </div>    
        </div>
        <div class="row">
        <form method="post">
         <div class="col-sm-4"><div class="form-group">
             <label for="Codigo Factura">Codigo Factura:</label>
              <input type="number" class="form-control" name="codigofactura"  id="codigofactura" required>
            </div>
            </div>
            <div class="col-sm-4"><div class="form-group">
             <label for="Cedula">Cedula:</label>
              <input type="number" class="form-control" name="cedulacliente" id="cedula" required>
            </div>
            </div>
            <div class="col-sm-4"><div class="form-group">
             <label for="Nombre">Nombre:</label>
              <input type="text" class="form-control" name="nombrevalidar" id="nombre" disabled>
            </div>
            </div>
            <div class="col-sm-4"><div class="form-group">
             <label for="Direccion">Direccion:</label>
              <input type="text" class="form-control" id="direccion" disabled>
            </div>
            </div>
            <div class="col-sm-4"><div class="form-group">
             <label for="Telefono">Telefono:</label>
              <input type="number" class="form-control" id="telefono" disabled>
            </div>
            </div>
           <div class="col-sm-4"><div class="form-group">
             <label for="Vendedor">Vendedor:</label>
            <select class="form-control" id="selector" name="cedulavendedor" required>
              <option ></option>
              <?php
            $mostrarvendedor = new Factura();
            $mostrarvendedor -> mostrarVendedorController();

            ?>
            </select>
            </div>
            </div>
            <div class="col-sm-4"><div class="form-group">
             <label for="Fecha">Fecha:</label>
              <input class="form-control" type="date" id="fecha" value="<?php echo date("Y-m-d");?>" disabled>
            </div>
            </div>
              <input  type="number" id="totaltemp" class="totaltemp" name="totalventa" hidden>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <a href="#addproductomodal" class="btn btn-success" data-toggle="modal"><i class="material-icons"><span class="glyphicon glyphicon-plus"></span></i><span id="spantitulo">Nuevo Producto</span></a>
                <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"><span class="glyphicon glyphicon-plus"></span></i><span id="spantitulo">Nuevo Cliente</span></a>
                <a href="#addproductodetallemodal" class="btn btn-success" data-toggle="modal"><i class="material-icons"><span class="glyphicon glyphicon-plus"></span></i><span id="spantitulo">Agregar Productos</span></a>
                <input type="submit" class="btn btn-success guardar" value="Guardar"></input>
            </div>
        </div>
        </form>
        <!-- Edit Modal HTML -->
New Client × ID Name Telephone Address DescriptionNew Product × Product Code Product Name Price QuantityProduct Code Product Name Price QuantityProduct Code Product Name Price QuantityQuantityQuantity

Add Product × Product Code Product Name Price Quantity Action showProductoFacturaController(); ?>

saveCustomerInvoiceController(); $savedatainvoice->saveProductInvoiceController(); $savedatainvoice->insertInvoiceController(); ?> 
        </br>
        <div class="row">
            <div class="col-sm-12 table-responsive">   
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Codigo De Producto</th>
                        <th>Cantidad</th>
                        <th>Descripcion</th>
                        <th>Precio Unitario</th>
                        <th>Total</th>
                      </tr>
                    </thead>
                    <tbody class="agregarproducto">

                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>
</div>
</div>
jquery

3 Answers

  1. Best Answer

    This is a misconception.

    With .one()you are adding a handler to the indicated event (in this case click) and that event handler will be executed at most once per element and event. That's why you expect to see the value only once in the console.

    But you see it several times, why?

    Because every time you click on the button you are associating a new event handler to the element. And said controller is considered different from the previous one (because it is the same function does not mean that it is the same controller). The fact that it has oneonly indicates that this controller is going to be executed once; but if you bind it multiple times, then it will only run once... multiple times.

    Here you can see a similar case: press the add events button several times, with each one of them a new controller will be associated, so in the console you will see as many messages as times you have pressed the main button:

    $("#principal").click(function() {
  $("#botones button").one("click", function() {
    console.log($(this).text());
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button id="principal">Añadir eventos a los otros bottones</button>
</div>
<div id="botones">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

    In the case of the question, each time you click on it .agregaryou will be associating a new event handler clickto each .eliminardetalleof the page. Not only the one that has just been added, but also that one and the rest that already existed on the page.

    A possible solution would be to use a sentinel variable so that the button only executes once. But besides that, you should take the event handler binding out of the clickadd one (to avoid binding multiple times) and use delegate events instead:

    $("body").on("click", "#botones button", function() {
  if (!this.clicked) {
    this.clicked = true;
    console.log($(this).text());
  }
});

$("#principal").click(function() {
  // otras operaciones sin añadir eventos
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button id="principal">Añadir eventos a los otros bottones</button>
</div>
<div id="botones">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

    You can also have delegate events with .one()but they are more complex (in the sense that they are "trick" since they would only be executed once per selector), or with .off()... but again it is not easy with delegate events.

    • 5

  2. change

    $(".removedetail").one('click', function() {

    by

    $(".removedetail").on('click', function() {

    one makes a call for each element that matches the selector, not just the one you clicked.

    • 0

  3. What you mention usually happens when you reference the same script file several times. Or because the event that launches the action is inside a function, which makes it duplicate the action with each pass.

    In addition to fixing the .one bug that my partner above comments

    • 0