Problems with PreventDefault () and windows.location, load the page

Question

Problems with PreventDefault () and windows.location, load the page

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

simplifying the code a bit because it is very extensive I have this html

<div class="quantity buttons_added">
 <input type="number" size="4" class="input-text qty text" title="Qty"
                value="1" min="0" step="1" name="cantidad_{{$contador}}">
   <a href="" class="btn btn-warning actualizaCantidad_{{$contador}}" 
                data-linkcarrito="{{url('/carrito/'.$elementocarrito->slug)}}"
                data-cantidadidentificador="{{$contador+1}}"><i class="fa
                fa-refresh"></i></a>
           </div>

This code is dynamic, so in Jquery I want you to select all the classes that start with "updateQuantity" and once selected to give each individual link get an amount and a link, and redirect me to that same link, the problem is that when I click, it never does preventDefault (), I always end up loading the page. I have tried putting # in the links, with javascript: void () and with this I can avoid the execution of the page, but it does not redirect me to any place. I've tried with e.preventDefault (); with e.stopPropagation (); and with false return and same result. I have tried alert ('JQUERY WORKS'); to see if I load it at the top of the page and load it perfectly, so some error not load well jquery is discarded.

Any ideas?

$('document').ready(function(){

alert('JQUERY FUNCIONA ');

$('a[class^="actualizaCantidad"]').click(function(e)

    {
         e.preventDefault();
        e.stopPropagation()

        var cantidad = $(this).data("cantidadidentificador");
        var href = $(this).data("linkcarrito");
            //$(location).attr("href", href);
            window.location.href = href;
            //alert(cantidad+' '+ href);

    }); });

jquery

asked by KurodoAkabane 09.08.2016 в 12:22

source

2 answers

Refresh IOS Swift 3 map maximum value + 1 with case in sqlserver

score 1 · Answer 1

Keep in mind that when you link the controller to the event click the links must be already created.

For what accounts it looks like the links are generated after having executed the instructions:

$('a[class^="actualizaCantidad"]').click(function(e) { .... });

This instruction will add the function as controller of the click event of all the elements that it finds at the moment in which it is executed. If the links are generated later, they will have the default behavior.

Try changing your alert "JQUERY WORKS" by:

alert($('a[class^="actualizaCantidad"]').length);

This way you can check if the links are already created when you execute the instruction.

score 1 · Answer 2

The answer is consistent with Asies and the comment of César González.

The correct way for Jquery to add, a Delegate Event

more information at: link

In summary, given a parent element, you will be aware of all the events that occur to your children, whether they are created at the beginning, or are created dynamically.

    $('div.buttons_added').on('click', 'a[class^="actualizaCantidad"]', function(){

    console.log("Actualizando a:", $(this).data('linkcarrito');
    // y aqui le mueves a lo que quieras

});

Good luck and greetings.