首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

jQuery 動態產生元素事件綁定:使用事件代理

     編輯:程式設計綜合問答

問題

動態生成的 `

  • ` 元素,需點擊顯示內部 `

    `,點擊關閉按鈕隱藏整個 `

  • `。直接綁定 `$("#meslib li").click(...)` 無效,因元素綁定時尚不存在。

    解決方案:事件代理

    將事件綁定在**靜態父層**(如 `#meslib` 或 `document`),利用事件冒泡機制攔截子元素事件。

    完整範例

    <ul id="meslib"></ul>
    
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <style>
        .tkoff { display: none; }
    </style>
    <script>
    $(function() {
        var arrData = [{id:'a'},{id:'b'},{id:'c'},{id:'d'},{id:'e'}];
        var strList = '';
        for (var i=0; i

    關鍵 API 對照

    jQuery 版本推薦寫法已棄用
    1.7+`$(parent).on(event, selector, handler)``live()` (1.9 移除)
    1.4.2+`$(parent).delegate(selector, event, handler)``live()`

    常見坑

    • 動態元素綁定用 `.click()` / `.bind()` → 無效。
    • 未阻止冒泡 → 點擊按鈕同時觸發父層邏輯。
    • 選擇器寫死 `id` → 動態生成多個相同 `id` 導致無效 HTML,應用 `class` 或 `data-*` 屬性。

    最佳實踐

    1. 統一使用 `.on()` 代理到最近的靜態祖先(如 `#meslib`)。
    2. 事件處理函數中用 `e.target`、`closest()` 精確判斷觸發源。
    3. 動態生成 HTML 時避免重複 `id`,改用 `class` + `data-id`。
    1. 上一篇文章:
    2. 下一篇文章:
    Copyright © 程式碼之家 All Rights Reserved