$ .ajax（）成功时不更新div与另一个文件（相同的id名称）的

Question

我有两个文件的HTML，都具有相同的名称id =示例的div。我想使用$ .ajax（）从第二个文件加载内容，并将第一个文件中的当前文本转换为div。问题是$（data）.find（'＃example'）不会返回元素#example。我知道这个错误是因为我使用相同的ID的名字，但毕竟我想从另一个文件下载这个div，所以我不明白。谁能解释一下？

的index.html：

<nav> 
    <ul> 
     <li><a href="index.html">home</a></li> 
     <li><a href="contact.html">contact</a></li> 
    </ul> 
</nav> 
<div id="example">one one one one </div> 

contact.html：

<nav> 
    <ul> 
     <li><a href="index.html">home</a></li> 
     <li><a href="contact.html">products</a></li>       
    </ul> 
</nav> 
<div id="example">one one one one </div> 

$('nav a').on('click', function(e){ 
 
    e.preventDefault(); 
 
    var url = this.href; 
 

 
    $.ajax({ 
 
     type: "POST", 
 
     url: url,  
 
     success: function(date){ 
 
      $('#example').html($(date).find('#example')); 
 
     } 
 
    }); 
 
});

Answer 1

$('nav a').on('click', function(e){ 
 
    e.preventDefault(); 
 
    var url = this.href; 
 

 
    $.ajax({ 
 
     type: "POST", 
 
     url: url,  
 
     success: function(response){ 
 
      $('#example').html($(response.data).find('#example')); 
 
     } 
 
    }); 
 
});

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

https://gitlab.com/Piterden/mcmp-pyro/blob/1.0/addons/default/defr/mcmp-theme/resources/js/theme/init.js#L144