如何在单个按钮单击或事件上执行两个任务

Posted 2023-03-05

【中文标题】如何在单个按钮单击或事件上执行两个任务

【英文标题】：How to perform two tasks on a single button click or event

【发布时间】：2014-07-31 17:05:33

【问题描述】：

我有一个点击它的按钮，它通过调用函数 incrementIndex 来增加计数值。但我也想为同一事件添加一个字符串到数组列表中。 下面提供了一个简单的代码 sn-p。

Java 脚本

var count=0;
function incrementIndex() 
count += 1;

数组列表

<%
ArrayList arr= new ArrayList();
String ele="3,2";
%>

按钮：

<button onclick="incrementIndex()">Button 1</button>

【问题讨论】：

你在混合 Scriplet 和 javascript 吗？

是的，基本上这是一个JSP代码。我们可以同时使用 Scriptlet 和 Javascript。

【参考方案1】：

在增量函数结束时调用 sring 函数。

$(function()
   $(#button").click(function()
  incrementIndex();  //this will call the increment function
 arr.add(ele);  //this will call the method add to arr passing it ele.
);
 );

或类似的东西

$(function()
   $(#button").click(function()
   $("#").increment();//what ever your incrementing function is
   $.get("ServerResponce.asp"), function( data )  // call controller or server action
   $( ".result" ).html( data );
);
);
);

【讨论】：

stringFunction 似乎是服务器端代码

不能用ajax渲染/返回服务器端代码吗？

要将字符串添加到 ArrayList，代码是 arr.add(ele)；但问题是我如何编写它，以便仅在单击按钮时调用该函数..

@user2900314 您将代码嵌套在 $(#button").click(function() 调用中

@JTG 你的意思是说我需要删除我的增量函数并用 $(function() $(#button").click(function()$("#" ).increment();$.get("ServerResponce.asp"), function( data ) arr.add(ele); $( ".result" ).html( data ); ); ); ) ;

【参考方案2】：

要让一个按钮单击调用另外两个任务（或其他），只需将其他任务嵌套到绑定到 onclick 的函数中

所以而不是：

<button onclick="incrementIndex()">Button 1</button>

你将拥有

<button onclick="increment_and_add_string()">Button 1</button>

那么你需要有这个代码

function increment_and_add_string()
     incrementIndex();  //this will call the increment function
     arr.add(ele);  //this will call the method add to arr passing it ele.

显然，您会遇到一些范围界定问题，而且如果不更深入地了解您从哪里获得arr 和ele，我将无能为力。但要点是您调用了一个执行多项任务的函数，并将其绑定到按钮单击事件。

【参考方案3】：

您可以拥有一个运行所有其他函数的处理函数。

<button onclick="handleButton1Click()">Button 1</button>

<script>
var count = 0,
    stringList = [];

function incrementIndex() 

  count += 1;


function addString(string) 

  stringList.push(string)


function handleButton1Click(e) 

  addString(e.someEventProperty);
  incrementIndex();


</script>

【参考方案4】：

You have to first understand how jsp is presented to the user in browser. Whatever is shown to the user in the browser is just html and javascript, having said this whatever java code you  have written in jsp is compiled and processed in JVM itself thus no java variable will be available to the end user in browser for further updation, on the contrary javascript runs in browser so you can do whatever you want with the help of javasscript in browser. 

Now coming to your problem, you have a List in java so its reference won't be available to you in browser so what you can do is you can have a javascript list and assign the java List to it. Now you will have an access to javascript list in the browser, do whatever you want to do with it as add/substract/concat etc and while submitting form, submit the value of that javascript list too in some hidden field and finally in your servlet/controller class you will have latest list using which prepare final updated java List.

Let say you java list is as below:

 <%
    List<Object> javaObjList = new ArrayList<Object>();
 %>

In your jsp assign it to java script variable as below
<script>
 var jsObjList = <%= javaObjList.toArrays()%>
</script>

Have some hidden field in you form as below:

<input type="hidden" name="finalList" id="finalListId"/>

Before form submission call a function which will do as follow:
<script>
function preSubmissionProcessing() 
   document.getElementById("finalListId").val = jsObjList; 
   // make sure jsObjList  is in scope so that accessible to this method

</script>

That's it