Question

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

此链接动态添加到dom，我点击

启动jQuery函数

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

事件触发正常，但页面重定向。我无法理解我做错了什么

Answer 1

在您阻止它之前，您的事件已被触发。

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

如果页面重定向，那么我认为你的听众效果不佳。在这里，您是一个带有用例的plunker。 With and whithout document ready

我不知道你把你的代码放在哪里，但是如果它在“准备好的文件”之外，那么听众永远不会开火。

$('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：对不起我的英文

PreventDefault不适用于动态链接

2 个答案: