FastAdmin鍵值組件動態(tài)渲染后按鈕失效了,如何解決?

FastAdmin鍵值組件動態(tài)渲染后按鈕失效了,如何解決?

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)渲染后按鈕失效的問題。

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊7 分享