jQuery on event 不适用于未来的选择器答案

【问题标题】：jQuery on event not working for future selectorsjQuery on event 不适用于未来的选择器
【发布时间】：2012-12-27 12:50:31
【问题描述】：

我有一个模态窗口。在其中有一个 ID 为 WebPartWPQ2 的表，它将在三种不同的状态下具有三个不同的类。类是 ms-applyfiltersinactive、ms-applyfiltersactive 和 ms-applyfiltershover em>。最初，当模态窗口弹出时，表格将具有 ms-applyfiltersinactive 类。只有在其中的选择框中更改选项时，表格的类才会更改为 ms-applyfiltersactive，然后在鼠标悬停时，该类会更改为 ms-applyfiltershoverover。关闭窗口时，表的类重置为 ms-applyfiltersinactive。

要求是我只需要在表格处于活动状态时才需要点击事件，即具有类 ms-applyfiltersactive 或 ms-applyfiltershoverover。

我正在使用

$(document).on("click","#WebPartWPQ2 .ms-applyfiltersactive, #WebPartWPQ2 .ms-applyfiltershoverover", function(){
    alert("Clicked");
});

这无法将点击事件附加到表格。这可能是因为表的类是 ms-applyfiltersinactive。

如果我使用以下代码

$(document).on("click","#WebPartWPQ2 table[class*='ms-applyfilter']", function(){
    alert("Clicked again");
});

在所有三种情况下都会触发该事件，这是我不想要的。

我尝试使用 hasClass 和 is 事件过滤掉选择器。

$(document).on("click","#WebPartWPQ2 table[class*='ms-applyfilter']", function(){
    alert($(this).is("table.ms-applyfiltersactive"));
});

但是当表有任何类时，这会返回相同的布尔值。

请帮帮我。

【问题讨论】：

如果我们不了解 HTML，我们将无法帮助您。 jsfiddle.net 演示会很有帮助。如果选择器不起作用，则可能意味着没有类.ms-applyfiltersactive 的元素。由于事件处理程序绑定到document，因此在绑定处理程序时，您要监听的元素具有哪些类并不重要。

标签： jquery event-delegation

【解决方案1】：

没有 HTML，我无法使用您当前的代码。但是，我创建了一个应该有所帮助的示例。

我建议做以下事情：

JAVASCRIPT：

$(document).on("click","#WebPartWPQ2", function(){
    switch($("#WebPartWPQ2").attr("class")){
        case 'ms-applyfiltersinactive':
            //do something
            break;
        case 'ms-applyfiltersactive':
            //do something
            break;
        case 'ms-applyfiltershoverover':
            //do something
            break;    
    }
});

演示：http://jsfiddle.net/PKWKn/11/

希望这会有所帮助！

【讨论】：