.jpg)
fastadmin鍵值組件(fieldlist)動態(tài)渲染導(dǎo)致按鈕失效問題詳解及解決方案
在使用FastAdmin的鍵值組件(fieldlist)時(shí)，若通過JavaScript動態(tài)渲染組件內(nèi)容后，新增按鈕無法響應(yīng)點(diǎn)擊事件，通常是由于事件綁定時(shí)機(jī)錯(cuò)誤導(dǎo)致。本文將深入分析此問題并提供有效解決方案，尤其針對FastAdmin文檔中提供的方案失效的情況。
問題根源在于：動態(tài)添加的元素在頁面初始加載時(shí)并不存在，因此頁面初始化時(shí)綁定的事件監(jiān)聽器無法捕獲這些元素的點(diǎn)擊事件。
解決方法：采用事件委托機(jī)制。事件委托將事件監(jiān)聽器綁定到父元素，事件冒泡至父元素時(shí)，再判斷事件目標(biāo)元素是否符合條件，從而觸發(fā)相應(yīng)事件處理函數(shù)。
以下示例代碼使用jquery實(shí)現(xiàn)事件委托，解決FastAdmin鍵值組件(fieldlist)動態(tài)渲染后按鈕失效的問題：
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button append Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-responsive fieldlist"> <tr> <td>ID</td> <td>Chinese name</td> <td>English name</td> <td>Number of pieces</td> <td>Volume</td> <td>Gross Weight</td> <td>Value (USD)</td> <td>Operate</td> </tr> <tr> <td colspan="8"> <button class="btn btn-primary btn-append">Append</button> </td> </tr> </table>
$(document).ready(function() { $(document).on('click', '.btn-append', function(event) { event.preventDefault(); // 追加新元素的邏輯 let newRow = `<tr> <td>New ID</td> <td>New Chinese name</td> <td>New English name</td> <td>New Number of pieces</td> <td>New Volume</td> <td>New Gross Weight</td> <td>New Value (USD)</td> <td><a href="https://www.php.cn/link/8fcd9e5482a62a5fa130468f4cf641ef" class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i> Remove</a></td> </tr>`; $('table.fieldlist').append(newRow); }); // 為動態(tài)添加的刪除按鈕綁定事件 $(document).on('click', '.btn-remove', function(event) { event.preventDefault(); $(this).closest('tr').remove(); }); });
這段代碼通過 $(document).on(‘click’, …) 將事件監(jiān)聽器綁定到 document 對象上，確保動態(tài)添加的 .btn-append 和 .btn-remove 元素的點(diǎn)擊事件都能被正確捕獲和處理。 這有效解決了動態(tài)渲染后按鈕失效的問題。 請注意，代碼中使用了更簡潔的模板字符串來創(chuàng)建新的行。
通過事件委托，即使是動態(tài)添加的元素，也能保證其事件能夠被正確處理，從而解決FastAdmin鍵值組件動態(tài)渲染后按鈕失效的問題。
.png)
