加載頁面時，jQuery代碼不起作用

我遇到問題。我有一個HTML頁面，在同一個腳本標記中有一個javascript代碼和一個jQuery代碼。加載頁面時，jQuery代碼不起作用

這裏是我的HTML與JavaScript和jQuery：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Page</title> 

    <!-- css --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
    <link href="css/nivo-lightbox.css" rel="stylesheet" /> 
    <link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" /> 
    <link href="css/animate.css" rel="stylesheet" /> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- javascript and bootstrap --> 
    <script src="js/jquery.min.js"></script> 
    <link href="js/bootstrap.min.js" type="text/javascript"> 
    <link href="js/modal.js" type="text/javascript"> 

    <!-- template skin --> 
    <link id="t-colors" href="color/default.css" rel="stylesheet"> 


    <script> 

    <!-- HERE IS SOME PURE JAVASCRIPT CODE --> 

$(document).ready(function() { 
    var table = $('#tableBody tr td'); 

    table.on("click",function() { 
    table.removeClass("test-class"); 
    $(this).addClass("test-class"); 
    }); 
}); 
</script>

我的問題是：在頁面加載時，我的jQuery函數不工作，但是當我複製此功能，並將其粘貼到瀏覽器的控制檯上，它完美地工作。

注意：當我在瀏覽器的控制檯上發出警報時，它會起作用。這意味着我的jQuery正在加載頁面。

我缺少什麼？

在此先感謝。

來源

2015-04-22 daniel_serretti

檢查瀏覽器的JavaScript控制檯是否有錯誤。 – ceejayoz

你應該使用腳本標籤的JavaScript文件，而不是鏈接標籤 – Sushil

頁面上有'table'元素; ....或任何具有該ID？ – tymeJV

嘗試代碼

$('document').on("click",'#tableBody tr td',function() { 
    var table = $('#tableBody tr td'); 
    table.removeClass("test-class"); 
    $(this).addClass("test-class"); 
});

我不知道如果td元素是在代碼或我創建t是靜態html。如果td或table是動態的，DOM不知道它在哪裏，因爲當瀏覽器運行時，它總是保留原始html的記錄。

DOM有時會失去跟蹤，因此使用（'click'，'＃target'，func（））的格式將使DOM返回並再次找到目標。

來源

2015-04-22 16:47:16

是的，就是這樣..它解決了我的問題，還有一個教訓!!我的桌子是動態的，非常感謝。 –

這可能是因爲瀏覽器的控制檯有自己的美元符號對象「$」，至少Firefox和Chrome的。

從https://developer.chrome.com/devtools/docs/console：

$（）

返回指定CSS選擇器匹配的第一個元素。這是document.querySelector（）的一個快捷方式。

$$（）

返回所有指定CSS選擇匹配的元件的陣列。這是document.querySelectorAll（）的別名

$ X（）

返回符合指定的XPath的元件的陣列。

要檢查是否jQuery是加載，你可以在瀏覽器中執行此控制檯：

typeof jQuery

如果它的加載答案是

"function"

來源

2015-04-22 16:35:11 dekkard

我的jQuery加載，我做了這個測試。 –

好的，那麼問題是，你怎麼知道你的jQuery代碼不起作用？你可以把'''console.log（'hello'）;'''放在你的行下''$（document）.ready（function（）{'''然後檢查控制檯的輸出嗎？ – dekkard

加載頁面時，jQuery代碼不起作用

回答

相關問題