PreventDefault不适用于动态链接

Question

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

This link is dynamically added to the dom, and I fire a jQuery function on click

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

The event fires fine, but page redirects. I cant understand what I've done wrong

Answer 1

You event is fired before you can prevent it.

$('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

If the page redirects then I think your listener is not working well. Here you are a plunker with a use case. With and whithout document ready

I don´t know where you put your code, but if it's outside the "document ready" that listener never fires.

$('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 for my english