jQuery .Click（）不起作用

Question

我有一个外部*.js文件，其中包含以下代码：

$(".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文件。 但是当我点击类为“hlavni_tema”的span元素时，没有任何反应。 我也尝试过这段代码：

.on("click", function())

和

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

- 一切都无济于事。

谢谢你的帮助。

Answer 1

在加载DOM之后，您必须分配事件处理程序。

试试这个，它应该工作。

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

Answer 2

将代码放在$(document).ready()

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

否则，您的代码在元素添加到DOM之前运行，因此选择器不匹配任何内容。

Answer 3

设置事件时，Dom可能还没有准备好。 将处理程序放入文档中

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

Answer 4

我在Firefox，Google Chrome和Internet Explorer中检查了相同的代码。 它在所有三种浏览器中都有效，可能是你在Jquery文件之前添加了点击事件

请检查您是否在click.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>

Answer 5

关于jQuery最重要的事情之一就是需要了解DOM何时完全加载，以便可以执行一个jQuery脚本。 一个好的建议是编码如下：

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

或者，您可以使用带有匿名函数的缩写形式，如下所示：

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

有关详细信息，请参见此处

注意“.ready（）”适用于DOM完全加载的时间，而匿名函数是该事件的处理程序; 看到这里 。

此外，如果您没有在本地加载库，则使用正确的jQuery源代码URL很重要。 要在StackOverflow上运行代码，我必须使用

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

甚至'我可以在网上找到与“http”相同的网址。

注意：

就绪事件发生在加载HTML文档之后，而onload事件发生在稍后，此时所有内容（例如图像）也已加载。

见这个讨论 。

由于您可能希望检查窗口是否已完全加载，因此该脚本也包含该代码。

 $( 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（）语句 - 它更整洁，并且不需要解除任何东西。