使用 Jquery 在 DIV 中未打開鏈接

Question

我正在嘗試使用 jquery 單擊一個 div 中的鏈接並讓它在位於原始 div 旁邊的另一個 div（名為 infoblock）中打開 HTML 文檔。 我在這里找到了一個例子，但我無法讓它工作。 我在網上找到了其他幾個變體，但仍然沒有運氣。 部分鏈接需要傳輸一個變量，所以我不確定這是否是問題的一部分。 我嘗試將單擊 function 附加到 ID 為“nav”的鏈接周圍的 div 以及 ID 為“details”的鏈接本身。 當我單擊該鏈接時，它會在完整的 window 中打開正確的頁面，而不是在應該為 go 的 div 中。 預先感謝您的任何幫助。

 $(document).ready(function() { $("#reservename").click(function() { $("#infoblock").load("createhandle.html"); }); $("#uploadpic").click(function() { $("#infoblock").load("uploadpic.php"); }); $("#deletechar").click(function() { $("#infoblock").load("selectdelete.php"); }); $("#nav").click(function() { $("#infoblock").load($(this).find("a").attr("href")); return false; }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="charlist" class="block"> <b>Your Characters:<b> <br> <button id="reservename">Reserve A Name</button> <button id="uploadpic">Upload A Picture</button> <button id="deletechar">Delete</button> <?php $result5 = mysqli_query($con,"SELECT * FROM handle WHERE user='$handle' ORDER BY charname ASC"); while($row = mysqli_fetch_array($result5)) { echo "<table>"; echo "<tr>"; echo "<td rowspan=5 align=left><img src='../pictures/". $row['face']. "' border=3></td>"; echo "<th align=left><a href='chat.php?charname=". $row['charname']. "'>". $row['charname']. "</a></th>"; echo "</tr>"; echo "<tr>"; echo "<th align=left><a href='choosepic.php?charname=". $row['charname']. "'>Choose Picture</a></th>"; echo "</tr>"; echo "<tr>"; echo "<th align=left><div id='nav'><a id='details' href='../details.html?charname=". $row['charname']. "'>Details</a></div></th>"; echo "</tr>"; if ($row['type'] == 'new'){ echo "<tr>"; echo "<th align=left><a href='createsheet.php?charname=". $row['charname']. "'>Create</a></th>"; echo "</tr>"; } echo "<hr>"; echo "</table>"; }?> </div> <p id="infoblock" class="block"></p>

Answer 1

單擊錨標記時，您必須阻止默認行為為了做到這一點，您必須偵聽單擊錨本身而不是 div 並return false以防止其默認行為。 所以你的代碼會變成這樣

  $('#details').click(function(e){
     {
       e.preventDefault(); //instead of this you can also return false
       $("#infoblock").load($('#details').attr("href"));
     }
   });
 
      

Answer 2

這對我有用：

 $(document).ready(function(){
 $('#details').click(function(e){
 e.preventDefault();
 $("#infoblock").html('<object type="text/html" data="'+$('#details').attr("href")+'" >');    
     });
  });