使用jQuery生成PrimeFaces按钮被点击，但点击事件被一遍又一遍地调用

Question

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

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

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。但是我要解决这个问题吗？ p>

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"> 是否确实具有 id="coordX"，因为您尝试通过 jQuery 选择。

最后，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();
});