Как создать кнопку, которая вызывает функцию и передает параметры в jQuery? - PullRequest
Новая
       69

Как создать кнопку, которая вызывает функцию и передает параметры в jQuery?

1 голос
/ 05 августа 2020

Я пытаюсь создать кнопку в jQuery, которая имеет событие onClick, вызывает функцию и передает некоторые параметры. Вот что я пробовал до сих пор: 

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)

EDIT. Скриншот:

введите описание изображения здесь

1 Ответ

1 голос
/ 07 августа 2020

Возможно, я неправильно понял запрос, но вот что, я думаю, вы пытаетесь сделать.

Вот автономное решение, которое вы можете запустить самостоятельно: 

<!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, которая записывает в консоль следующие сообщения (используя мои образцы данных): 

In the function!
ID: 1
recipient name: Jon Smith
co. name: Starbucks

Некоторые моменты, на которые следует обратить внимание:

  1. Я изменил ваш var user_array = []; на это: var user_obj = {};, потому что я думаю, вам нужен здесь объект, а не массив.

  2. В коде используется JSON.stringify() для преобразовать объект в текст, чтобы его можно было передать в качестве параметра функции, а затем преобразовать обратно в объект, используя JSON.parse().

  3. Я предположил некоторые образцы данных для запуска демонстрации.

...