jsf中ajax更新后JQuery不工作

我有个问题。我在jsf和primefaces应用程序中使用jquery来简化一些操作。Jquery在加载页面上运行良好，但当我更新某些组件时，Jquery不工作。例如：

<h:form>

<p:selectOneMenu value="#{contractBean.workType}" >
<f:selectItem itemLabel="" itemValue="" />
<f:selectItem itemLabel="product" itemValue="1"   />
<f:selectItem itemLabel="service" itemValue="2"   />
<f:selectItem itemLabel="product and service" itemValue="3" />
<p:ajax update="outPan" event="change" /> 
</p:selectOneMenu>

<p:outputPanel id="outPan">
<p:inpuText value="#{contractBean.workType}" id="wType"/>
<p:commandButton value="Submit" id="sButton"/>
</p:outputPanel>

</h:form>



<script type="text/javascript">
$(document).ready(function(){

$('#sButton').prop('disabled',true);
$('#wType').css({'border':'red'})

})
</script>

$（文档）.ready（函数（）{
$（'sButton'）.prop（'disabled'，true）；
$（'#wType'）.css（{'border'：'red'}）
})

---

请帮助您解决问题。谢谢。

修复您正在使用的脚本，按id选择元素应该如下：$（“#”+elemId）

$（文档）.ready（函数（）{
$（'sButton'）.prop（'disabled'，true）；
$（'#wType'）.css（{'border'：'red'}）
})

将js代码放入

函数中，并在
p:ajax的
oncomplete中调用它

像这样

<p:ajax update="outPan" event="change" oncomplete="myFunc()" /> 



js代码：

<script type="text/javascript">
$(document).ready(function(){
    myFunc();
});
function myFunc() {
    $('#sButton').prop('disabled',true);
    $('#wType').css({'border':'red'})
}
</script>


$（文档）.ready（函数（）{
myFunc（）；
});
函数myFunc（）{
$（'sButton'）.prop（'disabled'，true）；
$（'#wType'）.css（{'border'：'red'}）
}


说明：

primefaces ajax之后没有就绪事件（毕竟是ajax，而不是整个页面重新加载）

如果你想在
p:ajax
之后钩住一些js代码，你可以使用它的
onsuccess
属性
我当然不认为在呈现页面时按钮的ID是sButton。

通常在Jsf中，组件的Id是formID:componentId

在您的例子中，由于表单没有ID，JSF将生成动态组件ID，如jdt_k159，因此您的按钮ID将是jdt_k159:sButton。

还可以使用$（'id=[“xxx:yyy”]'）来确保JQuery中的安全性

按如下方式为表格提供ID：

<h:form id="myForm">
  ...
  ...
  <p:commandButton value="Submit" id="sButton"/>
</h:form>

<script type="text/javascript">
    $(document).ready(function(){

    $('[id="myForm:sButton"]').prop('disabled',true);
    ...
    ...
  })
</script>


...
...
$（文档）.ready（函数（）{
$（'[id=“myForm:sButton”]'）.prop（'disabled'，true）；
...
...
})

参考链接：



您所说的“jquery不工作”是什么意思？请尝试将
$（选择器）
更改为
jquery（选择器）
。可能有冲突。可能我没有正确解释我的问题。当页面打开时，jquery在页面的任何地方都可以工作。但当我用ajax更新outputPanel时，jquery在outpuPanel中不起作用。Jquery continue在页面的另一部分工作。很抱歉，我在编写示例时出错。我的意思是比页面加载时jquery工作得更好。但当update outputPanel jquery不工作时，可能我没有正确解释我的问题。当页面打开时，jquery在页面的任何地方都可以工作。但当我用ajax更新outputPanel时，jquery在outpuPanel中不起作用。Jquery将在页面的另一部分继续工作。谢谢Daniel的回答。在我的应用程序中，oncomplete事件起作用。如果您打算对HTML元素应用jQuery，那么Onsuccess确实是一个错误的钩子，而HTML元素只有在实际的ajax更新之后才可用：这反过来也是正确的。不过，我必须承认，PrimeFaces的命名更有意义。“success”必须解释为“ajax响应已成功检索”。故障条件为“错误”，然后将其处理为
onerror
。如果我们遵循标准JSF命名，您将拥有
onerror
作为
oncomplete
的对应项。这毫无意义。@FernandoPie，我建议您尝试使用Primefaces-AjaxFramework-Status，应该使用类似这样的工具，

<h:form id="myForm">
  ...
  ...
  <p:commandButton value="Submit" id="sButton"/>
</h:form>

<script type="text/javascript">
    $(document).ready(function(){

    $('[id="myForm:sButton"]').prop('disabled',true);
    ...
    ...
  })
</script>