Question

这很奇怪。我有简单的代码，不会触发，但是当我从浏览器控制台运行它时它工作正常...

此代码应该没有问题：

$("#clear_filter").on("click", function() {
        $('div#results>div').removeAttr('style');
        $('div#results>div').removeClass('filter');
        $('#filter_category').css('display', '');
    });

它随着一堆其他代码包裹在dom中......

有没有人遇到过类似的问题？

Answer 1

根据对问题的评论，似乎#clear_filter元素被动态添加到页面中（即在页面加载后添加）。

tl; dr ：您需要在元素位于页面后设置事件处理程序，或使用事件委派。

让我们来看看.on("click")调用的内容：

$("#clear_filter") - 找到ID为clear_filter
on("click", function() { /* .... */ }) - 为发生click事件的时间设置事件处理程序。

请注意，在绑定事件处理程序之前，需要找到元素。如果在运行此代码时元素不在页面上，它将不会在任何地方绑定，并且处理程序将不会运行（即使之后添加了元素）。

要解决此问题，您可以在绑定点击处理程序之前等待元素添加到页面中（为此，您需要知道添加元素的时间 - 这将特定于您的站点/应用程序），或者您可以使用event delegation：

$("body").on("click", "#clear_filter", function() { /* ... */ });

这里，处理程序没有绑定到#clear_filter，而是绑定到页面的<body>元素（#clear_filter的任何祖先都会这样做 - 我正在使用body，因为我不知道你的HTML更多。

当click上发生#clear_filter时，事件会一直冒泡到body，并在那里处理事件。

Answer 2

如果在页面加载后动态添加HTML元素，则必须指定delegated event listeners。

您没有在评论中向我提供#clear_filter的直接父ID /类，但此代码也可以使用。

$("body").on("click", "#clear_filter", function() {
    $('div#results>div').removeAttr('style');
    $('div#results>div').removeClass('filter');
    $('#filter_category').css('display', '');
});

事件不会解雇，但它从控制台工作

2 个答案: