jQuery的。點擊（）不工作

我有一個外部*.js文件，其中包含下面的代碼：jQuery的。點擊（）不工作

$(".hlavni_tema").click(function() { 
    alert("ok"); 
}); 
alert("loaded");

和HTML頁面，如下所示：

<div id="tema"> 
<span id="hlavni_tema_1" class="hlavni_tema">Základní fyzikální pojmy a jednotky</span> 
<input type="checkbox" name="tema" id="tema_1a" value="'1a'"> 
<label for="tema_1a">Základní fyzikální pojmy, měření ve fyzice</label> 
... 
<span id="hlavni_tema_8" class="hlavni_tema">Astrofyzika</span> 
<input type="checkbox" name="tema" id="tema_8d" value="'8d'"> 
<label for="tema_8d" class="posledni_label">Fyzikální obraz světa</label> 
</div>

在HEAD部分，我同時包括jQuery和外部文件源，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="/_jscripts/tema.js"></script>

當我打開網頁時，alert()通知"loaded"，以便導入jQuery文件。但是當我點擊class爲「hlavni_tema」的span元素時，沒有任何反應。我也嘗試使用此代碼：

.on("click", function())

和

.on("click", "#tema", function())

- 一切都是徒勞。

感謝您的任何幫助。

來源

2014-08-29 Ondra Válek

您必須在加載DOM後分配事件處理程序。

試試這個，它應該工作。

$(document).ready(function(){ 
    $(".hlavni_tema").click(function() { 
     alert("ok"); 
    }); 
    alert("Document loaded"); 
}); 
alert("Script loaded");

來源

2014-08-29 21:48:16 nisargjhaveri

把裏面的代碼$(document).ready()

$(document).ready(function() { 
    $(".hlavni_tema").click(function() { 
     alert("ok"); 
    }); 
};

否則，將元素添加到DOM之前你的代碼運行，所以選擇不匹配任何東西。

來源

2014-08-29 21:47:34 Barmar

大概Dom在設置事件時還沒有準備好。將您的處理程序放入文檔中準備好

$(function(){ 
    $(".hlavni_tema").click(function() { 
    alert("ok"); 
    }); 
});

來源

2014-08-29 21:47:55

我已經在Firefox，Google Chrome和Internet Explorer中檢查了相同的代碼。它可以在所有三種瀏覽器中工作，可能是在Jquery文件之前添加了點擊事件

請檢查您是否已將點擊代碼放在document.ready（）函數中。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">/script> 
<script src="/_jscripts/tema.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".hlavni_tema").click(function() { 
      alert("ok"); 
     }); 
     alert("loaded"); 
    }); 
</script>

來源

2014-08-29 21:58:38

一個瞭解jQuery的最重要的事情是，人們必須認識到約當DOM完全加載，使一個人的jQuery腳本可以執行。一個很好的建議是，代碼如下：

$(document).ready(function() { // your code });

或者，你可以使用縮短的形式與匿名函數，如下所示：

$(function() { 
    // your code 
});

更多信息，請參見here。

注意「.ready（）」適用於何時DOM完全加載，而匿名函數是該事件的處理程序;見here。

此外，使用正確的jQuery源代碼URL問題，如果你不是本地加載庫。要運行在StackOverflow上的代碼，我不得不使用

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

即使壽」我能找到相同的URL以‘http’前綴網上代替。

注：

HTML文檔已經被加載之後發生ready事件，而 onload事件發生後，當所有的內容（例如圖像）也被加載。

看到這個discussion。

由於您可能希望檢查窗口是否已完全加載，因此此腳本也包含該代碼。

$(document).ready(function() { 
 
    $('.hlavni_tema').click(function() { 
 
    console.log("ok"); 
 
    }); 
 
    console.log("document loaded"); 
 
}); 
 
    $(window).on("load", function() { 
 
    console.log("window loaded"); 
 
});

#tema { 
 
background:#eef; 
 
} 
 

 
.hlavni_tema { 
 
    color:#00c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!--script src="/_jscripts/tema.js">Commented out to work with SO functionality</script--> 
 

 
<div id="tema"> 
 
    <span id="hlavni_tema_1" class="hlavni_tema">Základní fyzikální pojmy a jednotky</span> 
 
    <input type="checkbox" name="tema" id="tema_1a" value="'1a'"> 
 
    <label for="tema_1a">Základní fyzikální pojmy, měření ve fyzice</label> ... 
 
    <span id="hlavni_tema_8" class="hlavni_tema">Astrofyzika</span> 
 
    <input type="checkbox" name="tema" id="tema_8d" value="'8d'"> 
 
    <label for="tema_8d" class="posledni_label">Fyzikální obraz světa</label> 
 
</div>

注：此代碼需要添加一些CSS代碼用於演示目的的自由。另外，測試的一個好方法是用console.log（）替換alert（）語句 - 它更加整潔，並且不需要關閉任何東西。

來源

2017-07-22 20:05:34 slevy1

jQuery的。點擊（）不工作

回答

相關問題