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修改元素的事件函數的參數

回答

相關問題