Question

我正在调用页面刷新后选择组件ID的功能：

$(document).ready(
  function() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
  }
)

我的提交按钮示例：

<h:form id="form">
  <h:commandButton id="btnSubmit" action="#{myBDE.save}" type="submit" >
    <f:ajax execute="@form" render="@form"/>
  </h:commandButton>
  ...
</form>

每次单击任何提交按钮时，如何创建相同的函数（我正在使用ajax，所以我在没有页面重新加载的情况下工作，document.ready对我来说还不够）。有可能吗？

更新（部分功能解决方案）：

var myFunc = function() {
  document.getElementById('form:#{myBDE.componentId}').focus();
  document.getElementById('form:#{myBDE.componentId}').select();
};

$(document).ready(function() {
  myFunc();
  $('input[type=submit]').click(myFunc);    
});

我可以调用函数将onclick="return myFunc();"添加到h:commandButton，问题是，<f:ajax>在调用函数后呈现表单，因此select和focus被清除：（

Answer 1

为函数命名（当前，它是一个匿名函数），然后在需要时调用该函数。

$(document).ready(
  onPageLoad(); // call it when page loads    
  $('form').submit(onPageLoad); // also call whenever a form is submitted
)

function onPageLoad() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
    return true;
}

Answer 2

这应该有效

$('input[type="submit"]').click(function(){ 
  document.getElementById('form:#{myBDE.componentId}').focus(); 
  document.getElementById('form:#{myBDE.componentId}').select();
 });

实际上，您可以将函数绑定到任何事件。在这种情况下，它是具有属性type = submit

的输入标记的click事件

Answer 3

您应该将处理程序委托给更高级别的dom元素：

$(document).ready(function() {
  $('h:body').on('click', 'input[type=submit]', function() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
  });    
});

请参阅jQuery.on()。

提供选择器时，事件处理程序称为授权。直接在事件发生时不会调用处理程序绑定元素，但仅适用于后代（内部元素）匹配选择器。 jQuery从事件目标起泡事件到附加处理程序的元素（即最里面的）最外面的元素）并为其中的任何元素运行处理程序匹配选择器的路径。

然后是：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

因此，将为该类型的所有元素处理该事件，即使它们稍后通过ajax添加。请注意，我在此处使用h:body作为委托的元素，但您可以使用document.ready时存在的任何元素，并保证是所有提交输入的祖先。

Answer 4

如果您有不同的ID或名称，则只需执行类似

的操作

$(document).ready(function(){
    $('#btn1, #btn2, #btn3').on('click', function(evt){
        evt.preventDefault();
        //your code
        $(this).submit(); // or not submit, your choice
    });
});

Answer 5

尝试这件事

 $(document).ready( function (){

           $('input[type=submit]').click( function (){
                  // Whatever you want on submit button click option.
           }
 });

这将抓取页面上的每个提交按钮并将click事件绑定到它，并且将在任何提交按钮单击时调用此代码。

每个提交按钮调用相同的功能

5 个答案: