How to create a button that calls a function and passes parameters in jQuery?

问题

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()

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)

EDIT. Screenshot:

回答1:

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>

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

Some points to note:

I changed your var user_array = []; to this: var user_obj = {}; because I think you need an object here, not an array.
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.

来源：https://stackoverflow.com/questions/63270876/how-to-create-a-button-that-calls-a-function-and-passes-parameters-in-jquery

标签

javascript

html

jquery

datatables