jQuery和鏈接 - 奇怪的現象

一些文字鏈接1

<a href="http://anotherlink.com">link2</a>

和jQuery代碼：jQuery和鏈接 - 奇怪的現象

$('#inner a').click(function(){ 
    console.log('achtung'); 
});

但是，當我點擊鏈接1，單擊處理程序不調用。

而在另一種情況：

$('a').click(function(){ 
    console.log('achtung'); 
});

當我點擊鏈接2，處理程序調用，但鏈接1仍然unworking。

你能解釋一下我爲什麼？

這裏是更多的代碼：

<div id="text-wrapper"> 
    <div id="text"> 
     <div id="content_close">close</div> 
     <div id="inner"> 
     <!--Here will be content--> <br />    
    </div> 
    ... 
</div>

和內容通過AJAX加載到內塊。

我的問題是與鏈接，我加載內容動態，因此，jQuery代碼運行時，頁面會不會我的內容鏈接。所以我必須使用直播功能：

$('#inner a').live('click', function(){ alert('achtung'); });

謝謝大家，問題解決了。

來源

2009-10-12 Ockonal

有什麼不妥的任何代碼的（雖然我注意到你」讓處理程序運行後鏈接地址仍然被遵循，這似乎是故意的）。最佳猜測：圍繞#inner的標記出現問題。頁面是否有效？ – VoteyDisciple 2009-10-12 16:48:21

是的，頁面有效。 – Ockonal 2009-10-12 16:50:06

你確定這兩個代碼塊實際上運行？從本質上講，這段代碼看起來非常好。我會建議嘗試單獨運行此操作，並確保您沒有干擾此操作。 – 2009-10-12 16:55:17

當我改變

console.log('achtung');

到

alert('achtung');

它爲我預期。

也許你的控制檯表現不好，或者你用什麼來查看它無法正常工作？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Test</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> 
</script> 
</head> 
<body> 
<div id="inner">some text <a href="#contacts">link1</a></div> 
<p><a href="http://anotherlink.com">link2</a> <script type="text/javascript"> 
/*<![CDATA[*/ 
$('#inner a').click(function(){ 
    alert('achtung'); 
}); 
/*]]>*/ 
</script></p> 
</body> 
</html>

來源

2009-10-12 16:47:43 BryanH

什麼都沒有發生。我也嘗試在FireBug中設置斷點。仍然不起作用。 – Ockonal 2009-10-12 16:49:35

我添加了我的完整測試代碼。我也在Unbuntu上運行FF 3.5.3。你在跑什麼？ – BryanH 2009-10-12 16:53:53

您也可以使用其他瀏覽器嘗試您的代碼，並/或關閉所有分機。 – BryanH 2009-10-12 16:55:34

被包裹裏面$(document).ready(function(){ ... }) jQuery代碼？

如果您沒有等待DOM準備就緒，那麼jQuery無法找到#inner是可能的。

$(document).ready(function(){ 
    $('#inner a').click(function(){ 
     console.log('achtung'); 
    }); 
});

來源

2009-10-12 17:01:55

是的，當DOM準備就緒時，我的代碼正在運行。 – Ockonal 2009-10-12 17:04:59

如果可能的話，將所有Javascript放在頁面末尾是一種很好的做法。原因是因爲瀏覽器在遇到JS時進入同步模式。通過將代碼放在頁面的末尾，內容可以顯示得更快，給用戶一個印象，即加載頁面的速度要快得多。將代碼包裝在doc.ready函數中是沒有必要的，除非一個人假設該人一看到它就會點擊該鏈接。 – BryanH 2009-10-12 17:06:54

如果你的Javascript是在你的頁面的末尾，那麼等待DOM準備就緒會讓你付出代價，除非你保護自己免受奇怪/奇怪/奇怪/奇怪的瀏覽器錯誤的侵害。 – 2009-10-12 17:09:15

只是一個預感，嘗試把一個「回報」;或「調試器」;作爲你函數的最後一行。我想知道是否點擊鏈接導致控制檯被清除。

來源

2009-10-12 17:04:40

什麼都沒有發生。但是當我點擊內部的鏈接時，FireBug控制檯會在幾秒鐘內「跳躍」，然後再回來。 – Ockonal 2009-10-12 17:09:58

聽起來像jquery click事件沒有綁定到鏈接。嘗試添加一個id到鏈接並使用它來選擇錨點元素，並查看是否有所作爲。 – 2009-10-12 18:19:55

您的inner ID在頁面中是唯一的嗎？

你可以嘗試使用document.getElementById("inner")在Firebug中查詢它，看看返回的DOM節點是否是你期望的（將結果放在Firebug中，將會在你的頁面中將DOM節點置於高亮）。

來源

2009-10-12 17:11:47

是的，它是獨一無二的。 – Ockonal 2009-10-12 17:16:19

我暫時沒有選擇！ – 2009-10-12 17:16:42

有兩種方法可以實現這一點。必須加載HTML或僅NODE。要完成此操作，您必須檢查您的頁面是否已加載，或者在DOM完全更新後執行JavaScript。

如果您在 <head>像這樣指定你的JavaScript

：

<script type="text/javascript"> 
    $('#inner a').click(function(){ 
    console.log('achtung'); 
    }); 
</script>

當讀它，它就會執行。 HTML的其餘部分未加載到DOM中，因此JavaScript無法找到'#inner a'元素。有幾種方法來檢查，如果你的頁面加載

// simplest form, not the best (without jQuery) 
window.onload = function() { 
    // search for the node with jQuery 
    $('#inner a').click(function(){ 
    alert('achtung'); 
    }); 
} 

// jQuery form, best 
$(document).ready(function() { 
    // search for the node with jQuery 
    $('#inner a').click(function(){ 
    alert('achtung'); 
    }); 
}); 

// smallest jQuery from, also best 
$(function() { 
    // search for the node with jQuery 
    $('#inner a').click(function(){ 
    alert('achtung'); 
    }); 
});

另一種方法是將內聯的JavaScriptれ後

<div id="inner"> 
    <a href="/test.html">link1</a> 
</div> 
<a href="/test2.html">link2</a>` 
<script type="text/javascript"> 
    /*<![CDATA[*/ 
    $('#inner a').click(function(){ 
    alert('achtung'); 
    }); 
    /*]]>*/ 
</script>

來源

2009-10-13 07:40:44

jQuery和鏈接 - 奇怪的現象

回答

相關問題