如何创建一个调用函数并在jQuery中传递参数的按钮? [英] How to create a button that calls a function and passes parameters in jQuery?
问题描述
我试图在jQuery中创建一个按钮，该按钮具有一个onClick事件，并调用一个函数并传递一些参数.这是我到目前为止尝试过的:
I am trying to create a button in jQuery which has a onClick event and which calls a function and passes some parameters. Here is what I tried so far :
var user_array = [];
user_array['recipient_name'] = recipient_name.value;
user_array['co_name'] = co_name.value;
var myTable = $('#myTable').DataTable();
var rowNode = myTable.row.add(['<button type="button" id="button_edit" onclick=edit_customer_request(1,user_array)"name="edit_customer">Edit</button>'
])
.draw()
如您所见，我正在表中添加一个带有按钮的新行.我能够创建按钮，因此它会显示出来.但是，它不起作用，也不会在onclick上调用该函数.注意参数，我尝试传递两个参数，第一个是数字，第二个是数组:onclick=edit_customer_request(1,user_array)
As you can see I am adding a new row in the table which has a button. I am able to create the button, so, it displays. However, it doesn't work, it doesn't call that function onclick. Pay attention to the parameters, I am trying to pass two parameters, first one is just a number and the second is an array : onclick=edit_customer_request(1,user_array)
编辑.截图:
推荐答案
我可能对请求有误解，但这是我想您正在尝试做的事情.
I may have misunderstood the request, but here is what I think you are trying to do.
这是一个可以自己运行的独立解决方案:
Here is a self-contained solution you can run for yourself:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="myTable" class="display dataTable cell-border" style="width:100%">
<thead>
<tr><th>Foo</th></tr>
</thead>
</table>
</div>
<script type="text/javascript">
var recipient_name = { "value": "Jon Smith" };
var co_name = { "value": "Starbucks" };
var user_obj = {};
user_obj['recipient_name'] = recipient_name.value;
user_obj['co_name'] = co_name.value;
function edit_customer_request(id, data) {
data_obj = JSON.parse(data);
console.log("In the function!");
console.log("ID: " + id);
console.log("recipient name: " + data_obj['recipient_name']);
console.log("co. name: " + data_obj['co_name']);
}
$(document).ready(function() {
var myTable = $('#myTable').DataTable();
var btnHtml = '<button type="button" id="button_edit" onclick="edit_customer_request(1, JSON.stringify(user_obj))" name="edit_customer">Edit</button>';
var rowNode = myTable.row.add( [ btnHtml ] ).draw();
} );
</script>
</body>
</html>
单击按钮时，将调用edit_customer_request函数，它将以下消息记录到控制台(使用我的示例数据):
When you click the button, the edit_customer_request function is called, and it logs the following messages to the console (using my sample data):
In the function!
ID: 1
recipient name: Jon Smith
co. name: Starbucks
一些注意事项:
-
我将您的
var user_array = [];更改为:var user_obj = {};，因为我认为这里需要一个对象，而不是数组.
I changed your
var user_array = [];to this:var user_obj = {};because I think you need an object here, not an array.
代码使用JSON.stringify()将对象转换为文本，因此可以将其作为参数传递给函数-然后使用JSON.parse()转换回对象.
The code uses JSON.stringify() to convert an object into text, so it can be passed as a parameter to the function - and then converted back to an object using JSON.parse().
我猜了一些示例数据来使演示运行.
I took a guess at some sample data to make the demo run.
这篇关于如何创建一个调用函数并在jQuery中传递参数的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
