JQuery加載幫助

我想使用加載（）將一些HTML放在頁面上的div。我有這樣的一堆鏈接：JQuery加載幫助

<div id="slideshow"> 
     <div id="slides"> 
     <div class="projects"> 
      <a href="work/mobus.html" title="Mobus Fabrics Website"> 
       <img src="images/work/mobus.jpg" alt="Mobus Fabrics Website" width="280" height="100" /> 
      </a> 

      <a href="work/eglin.html" title="Eglin Ltd Website"> 
       <img src="images/work/eglin.jpg" alt="Eglin Ltd Website" width="280" height="100" /> 
      </a> 

      <a href="work/first-brands.html" title="First Brands Website"> 
       <img src="images/work/first-brands.jpg" alt="First Brands Website" width="280" height="100" /> 
      </a> 
     </div> 

     <a id="prev"></a> 
     <a id="next"></a> 
    </div>

和我的jQuery代碼看起來是這樣的：

$('.projects a').click(function() { 
    $('#work').load(this.href); 
});

的問題是點擊後的HTML被放置在#work div的，HTML中加載另一頁。請任何人都可以幫忙？

來源

2010-04-01 mtwallet

你能澄清你的意思是什麼「的問題時，點擊HTML被放置在#work div的，HTML是加載其他頁面。」此外，我沒有看到任何元素在您的HTML與工作的ID。這可能是問題嗎？ – JohnFx 2010-04-01 15:50:37

此外，如果您的網頁（例如：work/mobus.html）爲完整頁面並且包含標籤，則最終會生成無效的DOM – 2010-04-01 15:52:15

@JohnFx問題是我有另一個具有相同名稱的ID。謝謝您的幫助。 – mtwallet 2010-04-01 16:22:40

您需要防止默認動作停止HREF加載：

$('.projects a').click(function(event) { 
    $('#work').load(this.href); 

    event.preventDefault(); 
});

你也可以看到人們這樣做達到相同的：

$('.projects a').click(function(event) { 
    $('#work').load(this.href); 

    return false; 
});

然而，這種方法將停止事件冒泡進一步，以及防止默認操作。如果您有任何delegate或live方法在DOM樹上進一步偵聽相同事件，則執行return false將停止正在調用這些處理程序。

編輯：回調函數：

$('.projects a').click(function(event) { 
    $('#work').load(this.href, function (text) { 
     alert("This loaded: " + text); 
    }); 

    event.preventDefault(); 
});

來源

2010-04-01 15:49:35 Matt

@Matt似乎禁用整個按鈕，它不會加載href，但它也不會將HTML放在＃工作 – mtwallet 2010-04-01 15:53:00

它會這樣做。檢查是否存在具有工作標識的元素。嘗試添加回調函數以確保請求正在完成：添加一個函數作爲第二個參數並添加一個簡單的警報或其他內容。查看我的編輯例子。在click事件中添加一個警報以證明處理程序正在被調用。 – Matt 2010-04-01 15:55:44

@Matt我在頁面上有另一個同名的ID。非常感謝我的讚賞！ – mtwallet 2010-04-01 16:00:24

你必須防止事件鏈接..瀏覽器最終將跟隨鏈接。

，請參閱preventDefault

來源

2010-04-01 15:51:16

JQuery加載幫助

回答

相關問題