每个提交按钮调用相同的函数答案

【问题标题】：Each submit button calls the same function每个提交按钮调用相同的函数
【发布时间】：2012-11-24 08:09:20
【问题描述】：

我正在调用页面刷新后选择组件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>在调用函数后渲染表单，所以选择和焦点被清除:(

【问题讨论】：

你不能在提交按钮中添加一个onclick() 事件处理程序并从中运行函数吗？
是的，我可以，但我希望 jQuery 或 Javascript 有一些提交表单的通用方法（类似于 $(document).ready 在页面刷新后）
@gaffcz，jQuery 确实为此提供了一个内置系统。这叫做“委托”。我在回答中解释了。
@gaffcz 你最终会以相同的形式在某些h:commandButton 之后调用<f:ajax execute="@form" render="@form"/> 吗？因为如果你这样做了，你最好将这些按钮转为使用<f:ajax execute="@form" render="@form"/>，并在这些按钮操作结束时调用myBDE.save，这里不需要jQuery...
@Daniel: 嗯，我不确定我是否理解你，但我怎么能在f:ajax 之后打电话给MyBDE.save？

标签： javascript jquery jsf

【解决方案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;
}

【讨论】：

谢谢，但从未调用过$('form').submit(onPageLoad);。我的表单 ID 确实是“表单”..
如果您只想定位id为'form'的表单，请将上面的选择器更改为$('#form')

【解决方案2】：

这应该可以工作

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

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

的输入标签的点击事件

【讨论】：

或者，如果您有提交按钮的 id 或类，您可以将其用作选择器
like $('#submit_button_id').click(function(){ //你的函数调用 });
谢谢，但它不起作用...函数永远不会被调用:(
我已经更新了我的问题 - 添加提交按钮的示例代码
你的意思是 $('#btnSubmit').click(function(){});不行吗？

【解决方案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 时存在的任何元素，并且保证是所有提交输入的祖先。

【讨论】：

谢谢，听起来不错。它适用于jsf页面吗？我正在使用<h:body> insted 的<body> 标签。你的解决方案对我不起作用..
@gaffcz，我将示例更改为“h:body”，但请参阅我在答案末尾添加的注释。您可以使用任何祖先元素。
我不知道为什么，但是嵌套函数从来没有被调用过:(

【解决方案4】：

如果你有不同的 ID 或姓名，那只是做类似的事情

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

【讨论】：

不需要提交表格？ $(this).parents('form').submit()
这对我不起作用（使用 ajax 调用，它在没有 ajax 的情况下工作），函数（evt）永远不会被调用:(

【解决方案5】：

试试这个

 $(document).ready( function (){

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

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

【讨论】：