Question

我是所有这些东西的新手，我想知道我在这里做错了什么。

我做了一个包含一些标签，输入和按钮的模态。创建模态的所有javascript代码都在一个单独的文件中运行。

我试图在单击模态按钮时触发java函数。

我正在使用NetBeans，Glassfish，JSF 2.2，Jquery和Bootsrap 来了代码：

<h:body>                        
        <div class="wrapper">
            <div class="well content-container vertical-center-aligned">                
                <h:form 
                      ...                    
                    <a id="lnkRememberPass" class="label-md col-md-6" href="#" style="text-align: right;">Remember Password</a>

                    <h:commandButton id="btnEmail" action="#{appFunctions.sendPasswordEmail}" rendered="#{!generalManagement.logged}"></h:commandButton> 
                </h:form>                                
            </div>                                                                                   
        </div>                                    
    </h:body>


<script type="text/javascript">  
    $(document).ready(function(e){  
        //send all the parameters to the JS file and create the modal.
    $('#lnkRememberPass').modal({           
        'modalClass': 'modal-window ',
        'shadeClass':'modal-shade',
        'closeText':'Close',
        'closeClass':'modal-close',
        'outputClass':'',
        'inputClass':'input-md form-control',            
        'buttonClass':'btn btn-primary btn-sm form-control sendMail', //sendMail is a class to find the button
        'formClass':'form-group vertical-center-aligned modal-form'
    });                      

      $(document).find(".sendMail").click(function(ex){ //find the 'sendMail' class and trigger a click at the hidden button    
            try{
                $("#btnEmail").trigger("click");              
            }catch(exception ex){
                console.log(ex);
            }
        });              
    });             
</script>

我不知道做所有这些事情的正确方法，我只是在学习= [

Answer 1

$(document).on("click", ".sendMail", function(event){    
  $(this).on("click", "#btnEmail", function(e) {
    console.log('do something');
  });
});

这可能会更好。（source）

Answer 2

感谢您对turbopipp的帮助，但我在这里找到了问题。

当我认为我应该做相反的事情时，我试图找到在JS文件中创建的按钮。（从JS文件中获取html按钮）。

那么这对我有用：

<h:commandButton id="btnEmail" class="hidden myClass" action="#{appFunctions.sendPasswordEmail}">
                 <f:ajax execute="@form" render="@none" /> //Not allowing the page to refresh 
</h:commandButton>

在我创建整个模态的JS文件中，我到达了主页面的html按钮。

button = $('<button />', {                  
            class:settings.buttonClass,
            text:'Request password'               
        }).on('click', function(e){ 
            e.preventDefault();
            console.log('something');
            $('.myClass').trigger('click');  
            console.log('success');                
        });

但我真的很讨厌有一个隐藏按钮来制作我需要的东西......

动态JQuery模态+ JSF交互

2 个答案: