prevent arbeitet nicht für dynamischen Link

Question

<a href="#" class="submit-form show-field" data-show-field="#Product" >View products</a> 

Dieser Link dynamisch den dom hinzugefügt wird, und ich Feuer eine jQuery-Funktion auf Klick

$('body').on("click", 'a.show-field', function(e) { 
    if (!$(this).attr('data-show-field')) { 
     return; 
    } 
    $($(this).attr('data-show-field')).parent().show(); 
    e.preventDefault();  
}); 

das Ereignis ausgelöst werden gut, aber Seite umleitet. Ich kann nicht verstehen, was ich falsch gemacht habe

Answer 1

Sie Ereignis wird ausgelöst, bevor Sie es verhindern können.

$('body').on("click", 'a.show-field', function(e) { 

    e.preventDefault(); 

    if (!$(this).attr('data-show-field')) { 
     return; 
    } 
    $($(this).attr('data-show-field')).parent().show(); 
    /*e.preventDefault(); */ 
}); 

Answer 2

Wenn die Seite umleitet dann denke ich, dass Ihr Hörer nicht gut funktioniert. Hier sind Sie ein Plünderer mit einem Anwendungsfall. With and whithout document ready

Ich weiß nicht, wo Sie Ihren Code, aber wenn es außerhalb der "Dokument bereit" ist, dass Hörer niemals ausgelöst wird.

$('body').on("click", 'a.show-field', function(e) { 
    alert("First attemp is attached"); 
}); 

$(document).ready(function() { 
    $('body').on("click", 'a.show-field', function(e) { 
    alert("Second attemp is attached"); 

    if (!$(this).attr('data-show-field')) { 
     return; 
    } 

    $($(this).attr('data-show-field')).parent().show(); 
    e.preventDefault(); 
    }); 
}); 

PD: sorry für mein Englisch