jQuery 事件绑定答案

【问题标题】：jQuery event bindingjQuery 事件绑定
【发布时间】：2011-01-01 19:33:40
【问题描述】：

环境：JSF 1.2 RI，RichFaces 3.3.2

当项目获得或失去焦点时，我们使用 jQuery 来更改 CSS 类。这很简单，但是当我们的部分渲染完成时，我们看不到这些焦点和模糊事件绑定到新渲染的表单元素。这是意料之中的，因为这些事件在文档准备好后不在 DOM 上，但是我们尝试使用几个插件（Listen 和 LiveQuery），因为 .live() 无法正常处理模糊和焦点事件在 1.3.2 和 RichFaces 提供的版本中。这些插件中的每一个都应该处理放置在文档上的新创建的项目。在实践中，尽管这些都没有达到预期的效果。

我们将输入/选择/文本区域包装在 div 或 span 中，以便根据我们的 Ajax 请求更新各个部分的呈现。这是由于 RichFaces 中的限制，即在部分重新渲染时不检查项目的渲染。除了那一小块，没有什么太令人兴奋的事情发生了。

我已经使用 $('ol').after(txtForNewListItem) 添加了项目，并确认 livequery 对这些项目正常工作，但不适用于 JSF 新呈现的项目。

有人有类似的结果并找到了合适的解决方法吗？我确实看到的一种方法是覆盖 document.createElement，但我们真的希望不惜一切代价避免这条路径。

【问题讨论】：

标签： jquery jsf richfaces

【解决方案1】：

RichFaces 将其内置为 rich:jQuery 组件。将选择器属性设置为您将在 jQuery 语句中使用的属性。将查询设置为您要调用的函数。如果您要重新绑定在加载时设置的元素，那么您还需要为组件命名，因为它们的 DOM 不会经历完整的重新渲染生命周期，并且不会有更新。

 丰富：jQuery id="focusEventBinder" 选择器="#arbitraryId"
             query="focus(function () { jQuery(this).addClass('onfocus');});"
             名称="focusEventBinder"

要解决这个问题，只需让您的组件在您希望调用的 Rich:jQuery 组件的名称中添加一个 oncomplete 属性。因此，在上面的示例中，我们需要将其添加到我们的组件中：

oncomplete="focusEventBinder();"

【讨论】：

有趣，解决你自己的问题。

【解决方案2】：

如果我理解正确，您可以在文档准备好后添加 HTML 内容，使用 $('ol').after(txtForNewListItem)。

所以你需要重建你的列表。我做类似的事情。这是“伪”代码：

  ol.append(
     jQuery("<li/>")
     .attr("id", "someID")
     .append(jQuery("<span/>")
        .addClass("btnRemoveItem")
        .attr("title", "Remove item from list")
        .attr("id", data[i].id)
        .click(function() { alert('hello') })
      )
    .append("txtForNewListItem")
    );

您需要在这段代码上做一些工作，但希望它能让您了解您需要做什么。

啊...在我得到答案的地方找到了我的帖子。看这里：Not able to bind click event to newly created span items (jQuery)

【讨论】：

项目没有通过 jQuery 添加到 DOM。通过声明我已通过 append 方法将元素添加到 DOM，我的意思是简单地暗示我这样做是为了测试我的 livequery 方法的实现——它有效。问题是，当第一次使用 JSF 生命周期渲染项目时，livequery/listen 事件没有正确绑定。
如果 $('ol').after(txtForNewListItem) 有效，那么所有其他 jQuery 触发器也应该有效。我对JSF一无所知。