How to execute .blur () of a dynamically created input, jquery?

0

Good day. The dynamic content is created as follows

var listado_ofertas_adicionales = $('.listado_ofertas_adicionales');
                       valCarrito = response.data;
 $.each(valCarrito, function (i) {
        $('<li/>').addClass('swipeout')
              .append($('<div/>').addClass('swipeout-content item-content')
                      .append($('<div/>').addClass('item-media')
                    .append('<img src="' + valCarrito[i].Url + '" onerror="this.onerror=null;" alt="" width="40" height="60" />'))
                      .append($('<div/>').addClass('item-inner')
                      .append($('<div/>').addClass('item-title-row')
                      .append($('<div style="font-size: 12px;"/>').addClass('item-title').append(valCarrito[i].Codigo_Inventario + " - " + valCarrito[i].Descripcion))
                     .append('<div class="codInventario" style="display:none">' + valCarrito[i].Codigo_Inventario + '</div>')
                      .append('<div class="tipo" style="display:none">' + valCarrito[i].Tipo + '</div>')
                    .append('<div class="tipo_costo" style="display:none">' + valCarrito[i].TipoCosto + '</div>')
                    .append('<div class="precioSocio" style="display:none">' + valCarrito[i].PrecioSocio + '</div>')
                     .append('<div class="volumenNegocio" style="display:none">' + valCarrito[i].VolumenNegocio + '</div>')
                     .append('<div class="item-after" data-unit-price="' + valCarrito[i].PrecioSocio + '"><span class="product-amount" style="font-size: 12px;">' + valCarrito[i].PrecioSocio + '</span></div>')
                                        )
                   .append($('<div/>').addClass('item-text')
                  .append('<input type="number" class="add_ofertas_adicionales" value="0" min="0" placeholder="Ingrese cantidad">')                                             
                                        )
                                    )
                                )
                                .appendTo(listado_ofertas_adicionales);
                        });

The input where I want to execute the function is class="add_ofertas_adicionales"

Try to do it this way:

    $$('.listado_ofertas_adicionales').blur('.add_ofertas_adicionales',function(e){
console.log("Agregando producto oferta");
});

but such a case does not work for me. Checking the console, I see that input generates it with an extra class that I do not enter not-empty-state .

<input type="number" class="add_ofertas_adicionales not-empty-state" value="0" min="0" placeholder="Ingrese cantidad">

Thank you very much in advance.

    
asked by JG_GJ 11.09.2018 в 17:34
source

2 answers

0

With the code that you have put, what you do is register a controller for the event blur on all the elements that have the class listing_additions_additions do not add_additions_additions

$('.listado_ofertas_adicionales').blur()

What you should do is put the blur on the class you are interested in:

$('.add_ofertas_adicionales').blur(function(...))

The other additional class that appears does not matter

    
answered by 11.09.2018 в 17:49
0

In this way, solve the problem:

$('.listado_ofertas_adicionales').on('blur','.add_ofertas_adicionales',function(e){
        console.log("Agregando producto oferta");
    });
    
answered by 11.09.2018 в 18:10