jQuery 在 f:ajax 之后应用 css 类

Posted 2023-02-22

【中文标题】jQuery 在 f:ajax 之后应用 css 类

【英文标题】：jQuery applying css classes after f:ajax

【发布时间】：2015-11-04 04:01:18

【问题描述】：

我环顾四周，无法得到关于我的基本问题的直接答案。

我们有一个网站将一堆基本的css类应用于元素在document.ready()中使用jQuery。起初这很好用。

但是现在我们也开始使用带有 facelets 的 JSF 2.0 并且有一些 f:ajax 标记 可以根据事件重新呈现页面的某些部分。正如您可以想象的那样，重新渲染的部分显示没有这些样式，因为在 ajax 调用期间没有再次调用 jQuery 函数。

我现在玩了一圈，发现你可以将 onevent 添加到 f:ajax 并强制再次调用主 jQuery 函数。但这感觉不是很优雅，我需要将它添加到所有 f:ajax 标记中。另外，我遇​​到了一些无法解释的行为。

所以我的问题是：

在 document.ready() 中应用样式类仍然有意义吗？或者在这种情况下这是不好的做法？我应该简单地将类添加到元素中吗？ jQuery ajax 是 f:ajax 的可行替代品吗？

非常感谢任何意见或帮助或指导。

谢谢

【问题讨论】：

这取决于 CSS 类在做什么。如果只是出于静态设计目的（不是因为一些更改的值而改变设计），我建议在没有 jQuery 的外部 .css 文件中设置 CSS 类属性。

谢谢 Ironmouse，我会这样做的。它添加了一些额外的效果，但我将删除这些效果并简化内容。

【参考方案1】：

我现在玩了一圈，发现可以在 f:ajax 中添加 onevent 并强制再次调用主 jQuery 函数。但这感觉不是很优雅，我需要将它添加到所有 f:ajax 标记中。

您可以使用jsf.ajax.addOnEvent() 将其应用于所有<f:ajax> 请求。另见How to re-execute javascript function after form reRender?

---

在 document.ready() 中应用样式类仍然有意义吗？或者在这种情况下这是不好的做法？我应该简单地将类添加到元素中吗？

这确实表明存在设计/思维问题。例如，您为什么不直接使用那些 jQuery 选择器而不是您打算添加的 CSS 类？要将 CSS 类添加到某些元素，无论如何您都必须使用 CSS 选择器来选择它们，对吧？将 CSS 选择器用于最终目的有什么问题？

从 Facelets 的角度来看，您可以考虑创建 tagfiles 以减少代码样板。您可以将<h:inputText styleClass="some-specific-class"> 包装在/WEB-INF/tags/inputText.xhtml 中，并继续使用<my:inputText>。

---

jQuery ajax 是 f:ajax 的可行替代品吗？

这是可行的。甚至还有可用的开源示例，例如 PrimeFaces，它是围绕 jQuery 和 jQuery UI 构建的。

【讨论】：

感谢 BalusC，你总是付出这么多的努力。 jQuery 函数在应用样式时确实添加了一些效果等，但我想我将删除它并仅使用 .css 文件中的实际类。无论如何，淡入效果开始看起来有点复古:-)

我不能使用 jsf.ajax.addOnEvent 脚本，我不希望函数在每个 ajax 请求上运行。但我会按照你的建议编写一些自定义组件来标准化我的标签。

不客气 :) 效果也许可以通过$(document).on(...) 语法来完成。另见 a.o. ***.com/questions/14400624/… 此外，我想指出标记文件与自定义组件不同。单击答案中的“标记文件”链接以获取详细信息。

是的，抱歉，这就是我的意思，标记文件。但是，我也有自定义组件，它们接受属性并构建 jsf 的逻辑块，这些组件在各处都重复出现。但我尽量保持简单。