0

I've got a piece of code that looks like this and works as expected

const $tableID = $('#edit_history_table');

$tableID.on('click', '.table-save', function() {
    var currentRow = $(this).closest("tr");

    var key = currentRow.find("td:eq(0)").text(); // get current row 1st TD value

    ...
});

If you click on the save icon in a table it gets that rows data. Now for integration in other parts I need to convert it to a named function so that (for example) a 'save all' button can just loop through the records and save each one of them.

I was expecting something like this to do the trick (where you pass the row as the parameter so you can use the function in the fore-mentioned use case)

$tableID.on('click', '.table-save', save_row($(this).closest("tr")));

function save_row(currentRow) {
    alert(currentRow);

    var key = currentRow.find("td:eq(0)").text(); // get current row 1st TD value

    ...
}

But when launching the page, I immediately see the alert box. And when clicking the button nothing happens.

I honestly don't really have a clue how to do it in another way...

No anonymous function can be used like in these answers.

S.J.
  • 91
  • 1
  • 10
  • Have `save_row` return a function which has the code you want to use inside it – evolutionxbox May 17 '21 at 12:30
  • 2
    Does this answer your question? [jQuery .on() method - passing argument to event handler function](https://stackoverflow.com/questions/15904243/jquery-on-method-passing-argument-to-event-handler-function) (Check [this](https://stackoverflow.com/a/15904419/8398549) answer) – Cid May 17 '21 at 12:31
  • 2
    that's because you directly call the function, doing this : `save_row($(this).closest("tr"))` – Cid May 17 '21 at 12:32
  • @Cid Not really. This again focusses on anonymous functions. (Or maybe I just don't understand it as I'm not a JS programmer). – S.J. May 17 '21 at 12:39
  • @evolutionbox then how do you pass a parameter to it? – S.J. May 17 '21 at 12:39
  • You invoke the `save_row` function immediately and set its *response* as the event handler. This is why it runs on page load. To fix this either wrap the `save_row()` call in another anonymous event handler (which would be redundant given your goal) or pass the *reference* of the function to the event handler and use the `this` reference within the function: `.on('click', '.table-save', save_row);` – Rory McCrossan May 17 '21 at 12:40
  • @S.J. `saveData = function (myParam) { return function (event) {` - If you don't like anonymous functions, why not give them a name? – evolutionxbox May 17 '21 at 12:41
  • 1
    @S.J. I insist, read the second answer, [this one](https://stackoverflow.com/a/15904419/8398549) `$tableID.on('click', '.table-save', { currentRow: $(this).closest("tr") }, save_row);`. And then, your function : `function save_row(event) { console.log(event.currentRow); }` – Cid May 17 '21 at 12:48
  • @Cid that's what I tried now (almost had it except the `event.` but the result is still undefined. I even tried `event.data.currentRow` but then I get an object that doesn't appear to contain my row fields. – S.J. May 17 '21 at 12:58

0 Answers0