使用jQuery生成被点击的PrimeFaces按钮，但是点击事件会被反复调用

Question

这是我试图完成的。我有一个包含两个JSF输入文本和一个按钮的隐藏表单。无论我在哪里点击一个div容器内，我将尝试计算相对于我的容器的x和y坐标。然后使用jQuery将x和y的值设置为两个JSF inputText的值，并提交表单。JSF页面后面的托管bean将尝试捕获x和y提交的值。

下面是我的代码。请让我知道我做错了什么，因为方法createNewInput内部管理bean myBean没有正确地被调用。

EDIT2

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>        
<div id="result">Click an Element</div>
<div id="pdfCol">
    <h:form>
        <h:outputText value="#{note.test}"/>
        <p:commandButton actionListener="#{myBean.createNewInput}" value="Submit"/>  
        <!-- This button is to see when I click, whether the method inside managed bean get invoked. And it did. By looking at the log files.-->
    </h:form>
</div>
<div id="noteCol">            
    <h:form style="display:none;" prependId="false">
        <h:inputText id="coordX" value="#{myBean.newInputXCoordinate}"/>
        <h:inputText id="coordY" value="#{myBean.newInputYCoordinate}"/>
        <p:commandButton id="button" actionListener="#{myBean.createNewInput}" value="Submit"/>
    </h:form>
</div>
<script>
    jQuery("#noteCol").click(function(e){
        var offset = jQuery(this).offset();
        e.stopPropagation();                
        jQuery("#result").text(this.id + "Offset: (" + offset.left + ", " + offset.top + "), " + 
                "Relative Coordinate: (" + (e.pageX - offset.left) + ", " + (e.pageY - offset.top) + ")");
        jQuery("#coordX").val(e.pageX - offset.left);
        jQuery("#coordY").val(e.pageY - offset.top);
        jQuery("#button").click();
    });
</script>

在服务器端，当调用托管bean myBean中的方法createNewInput()时，我打印出这对坐标。很高兴，我看到了两个坐标的正确结果。然而，它不断地打印这对坐标，但是第一次正确打印出来后，这对坐标的值是NaN。如何修复这个问题?

Answer 1

我不知道为什么你得到一个NaN。你在哪里看到的?此外，如果你计算e.pageX - offset.left而不是其他方式，对我来说更有意义。此外，在jQuery中设置输入元素的值应该由jQuery.val()函数完成。

同样，JSF将在生成的HTML输入元素ID前面加上表单ID，这将导致jQuery('#coordX')不返回任何内容。jQuery接受HTML元素id，而不是JSF组件id。您需要将prependId="false"添加到<h:form>以禁用该功能。但是你应该确保相同的输入组件不会在输出中出现不止一次，并且你没有任何其他父UINamingContainer组件在输入组件上，它们也会添加它们的ID，为了验证这一点，你需要检查生成的HTML <input type="text">是否确实具有你试图通过jQuery选择的id="coordX"。

最后，jQuery.submit()只适用于HTML <form>元素，而不是按钮。因此，您更希望使用jQuery.click()。

所以，总结一下这在理论上应该对你有用:

<div id="noteCol">
    <h:form prependId="false" style="display:none;">
        <h:inputText id="coordX" value="#{myBean.newInputXCoordinate}"/>
        <h:inputText id="coordY" value="#{myBean.newInputYCoordinate}"/>
        <h:commandButton id="button" actionListener="#{myBean.createNewInput}"/>
    </h:form>
</div>
<script>
    jQuery("#noteCol").click(function(e){
        var offset = jQuery(this).offset();
        e.stopPropagation();                
        jQuery("#result").text(this.id + "Offset: (" + offset.left + ", " + offset.top + "), " + 
                "Relative Coordinate: (" + e.pageX + ", " + e.pageY + ")");
        jQuery("#coordX").val(e.pageX - offset.left);
        jQuery("#coordY").val(e.pageY - offset.top);
        jQuery("#button").click();                
        // Or:
        // jQuery("#button").closest("form").submit();
    });
</script>

Answer 2

这是我的问题的解决方案。问题是点击事件出现了气泡。为了停止

jQuery("#noteCol").click(function(e){
    var offset = jQuery(this).offset();
    e.stopPropagation();                
    jQuery("#result").text(this.id + "Offset: (" + offset.left + ", " + offset.top + "), " + 
                "Relative Coordinate: (" + (e.pageX - offset.left) + ", " + (e.pageY - offset.top) + ")");
    jQuery("#coordX").val(e.pageX - offset.left);
    jQuery("#coordY").val(e.pageY - offset.top);
    jQuery("#button").click();
});
jQuery("#button").click(function(e){
    e.stopPropagation();
});