jquery - 当 .load() 同一页面时，在 jquery 中单击两次触发器

Question

这是我的主页html：

<script type="text/javascript" src="js/jquery.min.js"></script>
<div><a href="#" class="MyClick">Parent Click</a></div>
<div class="content"></div>
<script>
  $(document).ready(function(){ 
    $('.MyClick').click(function(){
       $('.content').load('page2.html');
    }); 
  })
</script>

这是page2.html

<a href="#" class="showoff">Child Click</a>
<script type="text/javascript">
 $(document).ready(function(){      
    $('.showoff').live('click',function(){
        console.log('I Clicked');
    });     
 });
</script>

单击链接时parent click，加载page2.html到控制台萤火虫中div.content并单击时child click打印一次..

但我的问题是当我再次parent click单击并再次单击时child click，在控制台打印两次但是我单击一次，就像page2.html之前尚未从 DOM 和child clickpage2.html 中删除之前与新的一起触发..

我想加载多少次page2.html当我单击一次时不打印多行Child click

Answer 1

每次加载时，page2.html您都会注册一个委托点击处理程序，.showoff因为您使用.live()（顺便说一句，不推荐使用，使用.on()or.delegate()版本<1.7），这就是每次点击获得多个打印的原因。

您是否将 live 用于特定目的？因为这对我来说似乎没有必要，只需在元素本身上使用一个处理程序。

<a href="#" class="showoff">Child Click</a>
<script type="text/javascript">
 $(document).ready(function(){      
    $('.showoff').on('click',function(){
        console.log('I Clicked');
    });     
 });
</script>