使用jQuery同步Primefaces JSF2组件的值（inputText）

我想使用jQuery来同步JSF2组件的值。 我们正在使用模板。由于我不确定这是否是以下脚本无法工作的原因，我将向您展示代码设计：

template.xhtml

<h:head>
    <script src="#{request.contextPath}/js/my.js" type="text/javascript"></script>
</h:head>
<h:body>
    <h:form id="main_form">
        <ui:insert name="content"/>
    </h:form>
</h:body>

<ui:composition ... template="templates.xhtml">
<ui:define name="content">
    <p:inputText id="title1" value="#{myBean.title1}" />    
    <p:inputText id="title2" value="#{myBean.title2}" />
    <p:commandLink id="syncBtn" styleClass="ui-icon ui-icon-arrowthick-1-e" />
</ui:define>

jQuery脚本/函数未附加到元素

我知道我可以使用回调（onblur、onclick等），但我想避免这种情况，因为我有很多这样的输入字段，所以我要使用更通用的解决方案

编辑： 我尝试了BalusC的答案（这当然是正确的），但肯定还有另一个错误。因为它不起作用。我插入了一个js警报，但它没有被显示

$('[id="main_form:syncBtn"]').click(function() {
    alert("Test");
});

---

这是因为它们没有

title1

和

title2

的客户端ID，所以jQuery无法找到它们。它们的ID为

main\u-form:title1

和

main\u-form:title2

。相应地修复JS代码

$('#main_form\\:syncBtn').click(function() {
    $('#main_form\\:title2').val($('#main_form\\:title1').val());
});

对于没有记住JSF是如何生成HTML的初学者，在编写jQuery代码时应该忽略JSF源代码，而应该查看JSF生成的HTML代码。您可以在webbrowser中通过右键单击并查看源代码或使用webbrowser的web developer工具集的“Inspect Element”功能来完成此操作

另见：

---

这是因为他们没有

title1

和

title2

的客户端ID，所以jQuery无法找到它们。它们的ID为

main\u-form:title1

和

main\u-form:title2

。相应地修复JS代码

$('#main_form\\:syncBtn').click(function() {
    $('#main_form\\:title2').val($('#main_form\\:title1').val());
});

对于没有记住JSF是如何生成HTML的初学者，在编写jQuery代码时应该忽略JSF源代码，而应该查看JSF生成的HTML代码。您可以在webbrowser中通过右键单击并查看源代码或使用webbrowser的web developer工具集的“Inspect Element”功能来完成此操作

另见：

---

您可以使用onkeyup“实时”保持em同步，就像这样谢谢Daniel。但是我想给用户更多的控制权，让他决定将值从一个字段复制到另一个字段。你可以使用onkeyup“实时”保持em同步，就像这样谢谢Daniel。但是我想给用户更多的控制权，让他决定将值从一个字段复制到另一个字段。