[英]Javascript modify parameters of an element's event function
Im wondering if there is a more elegant means of modifying the parameter of an onclick event. 我想知道是否有更优雅的方法来修改onclick事件的参数。 I have a table that I am dynamically adding/removing elements from and I reindex 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. 每行都有一个
delete
链接,该链接具有该行的索引(和duplicate
链接),该索引需要更新其参数以匹配修改后的行ID。
Currently my code looks like (simplified) 目前,我的代码看起来像(简体)
<a onclick="delRow(1)">delete</a>
and the javascript: ... 和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.
如果这有帮助我也有jQuery。 Thanks!
谢谢!
Updates: 更新:
So thanks to the glorious help of @rich.okelly I have solved my issue 感谢@ 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>
...
I used the .on()
function instead of the suggested .delegate()
function since it is deprecated. 我使用了
.on()
函数而不是建议的.delegate()
函数,因为它已被弃用。 Solution works well - hope it helps someone :) 解决方案运作良好 - 希望它可以帮助别人
If you change your html to something similar to: 如果您将html更改为类似于以下内容的内容:
<tr>
<td>
<a href="#" data-delete="true">delete</a>
</td>
</tr>
Then your javascript can be something like: 然后,您的JavaScript可能类似于:
$('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();
});
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.
您的示例使用新参数重写了整个行,这是一种不好的做法。
The most brain dead solution is getting rid of the parameters and setting a variable isntead. 最死脑筋的解决方案是摆脱参数并设置变量istead。
var row_to_dup = 42;
$("#a_row_dupper").bind('click', function (){
dupItem(row_to_dup);
});
//changing the row to dup
row_to_dup = 17;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.