单独的事件函数在父元素具有相同事件函数的子元素上触发两次

Question

下面是我的代码片段，问题是，如果你点击＆＃34; li＆＃34;文本为＆＃34; test 1＆＃34;警报提示确实触发了一次（正常），但如果你点击了＆＃34; li＆＃34;文本为＆＃34; test 2＆＃34;的元素，警报提示被触发两次，类似于两次调用的click事件函数。任何想法，线索？

＆＃13;

＆＃13;

$(document).ready(function(){
  
  $(document).on("click", ".nav a", function(){
    
   alert("test"); 
  })
  $(document).on("click", ".dp a", function(){
    
   alert("test"); 
  })
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="nav">
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 1</a>
    <ul class="dp">
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 2</a></li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

指定第一次点击事件的链接。

FIDDLE：https://jsfiddle.net/cshanno/Loc4427u/1/

JS

$(document).ready(function(){

  $(document).on("click", "ul:nth-child(1) > li > a", function(){

   alert("test"); 
  })
  $(document).on("click", ".dp a", function(){

   alert("test 2"); 
  })

});