jQuery事件绑定

Question

环境：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，但我们真的希望尽可能避免这条路。

- Scott

Answer 1

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

因此，您需要重建列表。我做了类似的事情。这是“伪代码”：

  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")
    );

你需要对这段代码进行一些修改，但希望它能给你提供实现的思路。

啊...我找到了得到答案的线程。请看这里：无法将点击事件绑定到新创建的span项（jQuery）

- Steven

---

项目未通过jQuery添加到DOM中。当我说我通过append方法将元素添加到DOM中时，我只是想暗示我这样做是为了测试我的livequery方法的实现——这个测试是成功的。问题在于，当使用JSF生命周期首次呈现项目时，livequery / listen事件无法正确绑定。 - Scott

如果$('ol').after(txtForNewListItem)可以正常工作，那么所有其他的 jQuery 触发器也应该能够正常工作。我对 JSF 没有任何了解。 - Steven

Answer 2

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

 rich:jQuery id="focusEventBinder" selector="#arbitraryId" 
             query="focus(function () { jQuery(this).addClass('onfocus');});" 
             name="focusEventBinder"

要解决此问题，只需使您的组件具有oncomplete属性，以调用您希望调用的rich:jQuery组件的名称。因此，在上面的示例中，我们需要向我们的组件添加以下内容：

oncomplete="focusEventBinder();"

- Scott

---

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