Javascript修改元素的事件函数的参数

我想知道是否有更优雅的方法来修改onclick事件的参数。我有一个表，我动态地添加/删除元素，我重新索引行。每行都有一个delete链接，该链接具有需要更新参数以匹配修改的行ID的行索引（和duplicate链接）。Javascript修改元素的事件函数的参数

目前我的代码看起来像（简体）

<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()功能，因为它已被弃用。解决方法效果很好 - 希望它可以帮助别人:)

来源

2011-12-20 Scott Tomaszewski

你以错误的方式去做这件事。考虑在你的函数中使用对象点击'this'的引用。最后，对删除链接的引用应该允许您查找需要删除的行。现在你不需要参数。 – 2011-12-20 16:56:48

如果你改变你的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(); 
});

更新

如果行动态添加到pre-exising表格（表格对于任何父元素都是可以互换的），您可以使用委托方法如下：

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

来源

2011-12-20 17:00:43

真棒，谢谢队友！ – 2011-12-20 17:14:11

回想起来，这个链接在动态添加时不起作用。我假设，因为我在$(document).ready区块内运行javascript部分。有没有更好的解决方案，而不是在创建这些链接时使用事件处理程序而不是您在此处创建的全局分配？ – 2011-12-20 21:58:10

@Scotty查看更新 – 2011-12-20 22:14:25

内嵌处理器的替代，可以使用事件代表团附加的事件处理程序

$("#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); 
}

所以改变它们很困难。你的例子用新参数重写整行，这是不好的做法。

来源

2011-12-20 16:58:30 Dennis

最大脑死亡解决方案是摆脱参数和设置变量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;

来源

2011-12-20 17:07:08 hugomg

Javascript修改元素的事件函数的参数

回答

相关问题