Javascript modify parameters of an element's event function

Question

I'm wondering if there is a more elegant means of modifying the parameter of an onclick event. I have a table that I am dynamically adding/removing elements from and I re-index the rows. Each row has a delete link that has the row's index (and a duplicate link) that needs to update its parameter to match the modified row id.

Currently my code looks like (simplified)

<a onclick="delRow(1)">delete</a>

and the javascript: ...

html = element.innerHTML;

html = html.replace(/dupRow(\\d+)/g, "dupRow(" + newIndex + ")");
html = html.replace(/delRow(\\d+)/g, "delRow(" + newIndex + ")");

element.innerHTML = html

and I would like it to become something along the lines of

if (element.onclick != null) {
    element.onclick.params[0] = newIndex;
}

Any such way of accomplishing this? I also have jQuery if this helps.

Updates:

So thanks to the glorious help of @rich.okelly I have solved my issue

<script>
...

var newRow = '\
        <tr>\
        <td class="index" col="0">0</td>\
        <td>this is content...</td>\
        <td><a href="#" row-delete="true">Del</a></td>\
        </tr>';

// re-index table indices in a non-efficient manner
function reIndexTable() {
    $("#rpc-builder-table").find('.index').each(function (i) {
        $(this).html(i)
    })
}

// add row
function addRow() {
    for (i = 0; i < $('#addRowCount').attr("value"); i++) {
        $("#rpc-builder-table").append(newRow);
    }
    reIndexTable();
}

$(document).ready(function () {

    // add row button
    $('#addRowsButton').on('click', function () {
        addRow();
    });

    // delete row
    $('#rpc-builder-table').on('click', 'td a[row-delete="true"]', function () {
        $(this).closest('tr').remove();
        reIndexTable();
    });

    ...
}
</script>

...

<div>
    <label>Rows to add: </label>
    <input id="addRowCount" value="1" size="2" />
    <button id="addRowsButton">Add Row(s)</button>
</div> 

<div><table id="rpc-builder-table"><tbody>
    <tr>
        <th>Idx </th>
        <th>Some content (1)</td>
    </tr>
</tbody></table></div>

...

I used the .on() function instead of the suggested .delegate() function since it is deprecated. Solution works well - hope it helps someone :)

Your going about this in the wrong way. Consider using reference to the object clicked this in your function. In the end the reference to the delete link should allow you to find the row that needs to be deleted. Now you will not need the parameter. — John Hartsock
– John Hartsock, Commented Dec 20, 2011 at 16:56

Rich O'Kelly · Accepted Answer · 2011-12-20 22:14:13Z

2

If you change your html to something similar to:

<tr>
  <td>
    <a href="#" data-delete="true">delete</a>
  </td>
</tr>

Then your javascript can be something like:

$('td a[data-delete="true"]').on('click', function() {
  $(this).closest('tr').remove();
});

Update

If rows are added dynamically to a pre-exising table (table is interchangeable for any parent element), you can use the delegate method like so:

$('table').delegate('td a[data-delete="true"]', 'click', function() {
  $(this).closest('tr').remove();
});

edited Dec 20, 2011 at 22:14

answered Dec 20, 2011 at 17:00

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Tomaszewski Over a year ago

Hmm looking back on this, the link doesnt work when it is dynamically added. I am assuming because i am running the javascript portion within a <code>$(document).ready</code> block. Is there a better solution than setting up these links with event handlers when they are created instead of the global assignment you have here?

Dennis · Accepted Answer · 2011-12-20 17:21:16Z

1

Instead of inline handlers, use event delegation to attach event handlers

$("#tableID").delegate("a", "click", delRow);

$("#tableID").on("click", "a", delRow); //jQuery 1.7

Inside the handler,

var row = $(this).closest("tr").index(); //Get the index of the parent row

Inline handlers get parsed into a function:

function onclick() {
    delRow(1);
}

so changing them is difficult. Your example rewrites the entire row with the new parameter, which is bad practice.

edited Dec 20, 2011 at 17:21

answered Dec 20, 2011 at 16:58

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Comments

hugomg · Accepted Answer · 2011-12-20 17:07:08Z

0

The most brain dead solution is getting rid of the parameters and setting a variable isntead.

var row_to_dup = 42;

$("#a_row_dupper").bind('click', function (){
    dupItem(row_to_dup);
});

//changing the row to dup
row_to_dup = 17;

answered Dec 20, 2011 at 17:07

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

Collectives™ on Stack Overflow

Javascript modify parameters of an element's event function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related