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文件。但是当我点击其类为＆＃34; hlavni_tema＆＃34;`的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文件之前添加了点击事件

请检查您是否已将点击代码放入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>

Answer 5

了解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

即便如此，我也可以在网上找到与“http”相同的网址。

注意：

在加载HTML文档之后发生就绪事件当所有内容（例如图像）也具有时，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（）语句 - 它更整洁，并且不需要解雇任何东西。

jQuery .Click（）没有工作

5 个答案: