使用jQuery生成PrimeFaces按钮，但点击事件会一遍又一遍地调用 [英] Use jQuery to generate PrimeFaces button clicked, but the click event get called over and over

问题描述

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

Here is what I try to accomplish. I have a hidden form with two JSF inputText and a button. Wherever i click inside a div container, I will try to calculate the x and y coordinate relative to my container. Then use jQuery to set the value of x and y to the value of the two JSF inputText and submit the form. A managed bean behind the JSF page will try to catch the value of x and y submit.

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

Below are my codes. Please let me know what I did wrong, because method createNewInput inside managed bean myBean did not correctly get invoked.

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中的createNewInput（）被调用 myBean 。很高兴，我看到两个坐标的正确结果。但是，会一遍又一遍地打印这对坐标，但在第一次正确打印后，坐标对的值为 NaN 。 / strong>但是我解决了这个问题吗？

On the server side, I print out the pair of coordinates when the method createNewInput() in the managed bean myBean is invoked. And gladly, I see the correct result of the two coordinates. However, it keep printing this pair of coordinates over and over again, but the values of the pair of the coordinates are NaN after correctly print out the first time. However do I fix this?

推荐答案

这是我的问题的解决方案。问题是点击事件搞砸了。所以为了停止这个

Here is the solution to my problem. The problem is the click event got bubble up. So in order to stop this

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

这篇关于使用jQuery生成PrimeFaces按钮，但点击事件会一遍又一遍地调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！