Javascript изменить параметры функции события элемента

Question

Мне интересно, есть ли более элегантное средство для изменения параметра события onclick.У меня есть таблица, из которой я динамически добавляю / удаляю элементы, и я переиндексирую строки.Каждая строка имеет ссылку delete, которая имеет индекс строки (и ссылку duplicate), которая должна обновить свой параметр, чтобы соответствовать измененному идентификатору строки.

В настоящее время мой код выглядит (упрощенно)

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

и javascript: ...

html = element.innerHTML;

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

element.innerHTML = html

, и я хотел бы, чтобы он стал чем-то похожимиз

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

Есть ли такой способ сделать это?У меня также есть JQuery, если это помогает.Спасибо!

Обновления:

Так что благодаря великолепной помощи @ rich.okelly я решил свою проблему

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

...

Я использовалФункция .on() вместо предложенной функции .delegate(), поскольку она устарела.Решение работает хорошо - надеюсь, оно кому-нибудь поможет :) 1025 *

Answer 1

Если вы измените html на что-то похожее на:

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

Тогда ваш javascript может выглядеть примерно так:

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

Обновление

Если строки добавляются динамически в существующую таблицу (таблица взаимозаменяема для любого родительского элемента), вы можете использовать метод делегата следующим образом:

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

Answer 2

Вместо встроенных обработчиков используйте делегирование событий для присоединения обработчиков событий

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

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

Внутри обработчика

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

Встроенные обработчики анализируются в функции:

function onclick() {
    delRow(1);
}

, поэтому их изменение затруднено.Ваш пример переписывает всю строку с новым параметром, что является плохой практикой.

Answer 3

Самое мертвое решение - избавиться от параметров и установить переменную вместо.

var row_to_dup = 42;

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

//changing the row to dup
row_to_dup = 17;