jquery代码在控制台上工作，但不在脚本标签或附加的js文件中工作

$(".filter-close").click(function(){
    $(this).parent().remove();

});

this snippet works in console but neither in script tags nor in attached js file.

此代码片段在控制台中工作，但在脚本标记和附加的js文件中都不工作。

3 个解决方案

#1

Wait for the DOM to be ready when calling your event handler:

在调用事件处理程序时等待DOM就绪:

jQuery(function($) { // this does the trick and also makes sure jQuery is not conflicting with another library 
    $(".filter-close").click(function(){
        $(this).parent().remove();
    });
});

^{When using another JavaScript library, we may wish to call $.noConflict() to avoid namespace difficulties. When this function is called, the $ shortcut is no longer available, forcing us to write jQuery each time we would normally write $. However, the handler passed to the .ready() method can take an argument, which is passed the global jQuery object. This means we can rename the object within the context of our .ready() handler without affecting other code}

在使用另一个JavaScript库时，我们可能希望调用$. noconflict()来避免命名空间的困难。当调用此函数时，$快捷方式不再可用，这迫使我们每次编写$时都要编写jQuery。但是，传递给.ready()方法的处理程序可以接受一个参数，该参数将传递给全局jQuery对象。这意味着我们可以在.ready()处理程序的上下文中重命名对象，而不会影响其他代码

^{Documentation for .ready() method}

文档时()方法

#2

It may be an issue of not being present in the DOM when the event handler is attached.

当事件处理程序被附加时，它可能是不存在于DOM中的问题。

Try something like this:

试试这样:

$( document ).ready(function() {
  // Handler for .ready() called.

    $(".filter-close").click(function(){
        $(this).parent().remove();

    });

});

The $.ready() (link below) ensures that it doesnt try to call the code to add the handler before the DOM is rendered, similar to OnLoad.

$.ready()(下面的链接)确保在呈现DOM之前不会尝试调用代码来添加处理程序，类似于OnLoad。

^{Documentation for JQuery .ready() method}

JQuery .ready()方法的文档

There are also potential library conflicts (see @D4V1D answer for example of that), but we cant say for sure without knowing what error message is appearing in the console (if any) and ideally more about the surrounding code.

还有潜在的库冲突(参见@D4V1D答案)，但是如果不知道控制台中出现了什么错误消息(如果有的话)，我们就不能肯定地说出来，最好更多地了解周围的代码。

Please hit F12 and see what being printed in the console and/or network panel, or google "BrowserName dev console" if F12 does nothing.

请按F12，看看控制台和/或网络面板上打印的是什么，如果F12什么都不做，请按谷歌“BrowserName dev console”。

But, as said it works in console, so i assume you mean dev console and that it is in fact just a timing issue, so unlikely a conflict (though still maybe syntax error somewhere else on page)

但是，如前所述，它在console中工作，所以我假设您指的是dev console，实际上这只是一个时间问题，因此不太可能出现冲突(尽管页面上其他地方可能仍然存在语法错误)

#3

-1

Maybe the element with filter-close class does not exist in the DOM at the time you call this function. I suppose you are adding elements to DOM dynamically. Are you?

可能在调用此函数时，DOM中不存在带有filter-close类的元素。我认为您正在动态地添加元素到DOM。是吗?

#1