.click在jquery上无法正常工作

PHPstorm spoiled my files just now, so I have to rework everything. And for some reason I can't get this working - click event just don't happen at all, neither with $("body"). It does work with $(document).on(...) though. (script is inside head and script tags)

PHPstorm刚刚破坏了我的文件，所以我必须重做一切。由于某种原因，我无法得到这个工作 - 点击事件根本就没有发生，也没有用$（“body”）。它确实适用于$（document）.on（...）。（脚本在head和script标签内）

$("#cover").on('click',function(e) {
     $(e.target).removeClass("no");
     $(e.target).addClass("yes");
});


<body>
<div id="button"></div>
<div id="cover">
    <div class="rows" id="row1"></div>
    <div class="rows" id="row2"></div>
    <div class="rows" id="row3"></div>
    <div class="rows" id="row4"></div>
    <div class="rows" id="row5"></div>
    <div class="rows" id="row6"></div>
</div>
</body>

3 个解决方案

#1

Code is executed in the order in which it's found on the page. So this:

代码按照在页面上找到的顺序执行。所以这：

$("#cover")

Needs to be executed after this is added to the page:

添加到页面后需要执行：

<div id="cover">

Otherwise that element won't be found by that selector, because it doesn't exist yet.

否则该选择器将找不到该元素，因为它尚不存在。

One approach is to move the JavaScript code to the bottom of the page. (Or at least to after the target element exists.) Another is to wrap it in the jQuery function which will attach it to the document's ready event:

一种方法是将JavaScript代码移动到页面底部。（或者至少在目标元素存在之后。）另一种方法是将它包装在jQuery函数中，该函数将它附加到文档的ready事件中：

$(function () {
    // add your code here
    // this will execute after the DOM is completely loaded
});

#2

Try doing this. It will execute once your DOM is ready.

试试这个。一旦你的DOM准备就绪，它将执行。

$(function(){
   $("#cover").on('click',function(e) {
     $(e.target).removeClass("no");
     $(e.target).addClass("yes");
   });
});

#3

You could try reverting your changes in PHPStorm by right-clicking the folder, navigating to Local History -> Show History -> right click file(s)/folder(s) and select Revert Changes.

您可以尝试通过右键单击文件夹，导航到“本地历史记录” - >“显示历史记录” - >右键单击文件/文件夹并选择“还原更改”来恢复PHPStorm中的更改。

If that doesn't work do the following:

如果这不起作用，请执行以下操作：

Move your javascript to the bottom of the page
将您的JavaScript移动到页面底部
Wrap the click with $(document).ready(...)
用$（document）.ready（...）换行点击
For debugging purposes do console.log($("#cover")); as your first line before binding a click event to see if jQuery object length is 1 or 0. If 1 the element is matched and found, if 0 then element doesn't exist or no match found.
出于调试目的，请执行console.log（$（“＃cover”））;作为绑定click事件之前的第一行，以查看jQuery对象长度是1还是0.如果1匹配并找到该元素，如果为0则元素不存在或找不到匹配项。

#1