jQuery 獲取自定義下拉組件 Span 選中事件的通用方法

場景

頁面使用第三方下拉組件（如 Select2、Chosen 或自定義），HTML 結構約為：

<div id="XY"></div> <!-- 組件容器 -->
<!-- 組件初始化後生成下拉面板 -->
<div class="dropdown-panel">
    <a href="javascript:;">選項1</a>
    <a href="javascript:;">選項2</a>
</div>

需在用戶點擊下拉選項時獲取選中文本/值，並更新頁面顯示。

通用解法：事件委託

由於下拉面板是動態生成，直接綁定無效，需在靜態祖先元素上委託：

// 假設下拉面板插入在 #XY 之後
$('#XY').next('.dropdown-panel').on('click', 'a', function(e) {
    e.preventDefault();
    const selectedText = $(this).text();
    const selectedVal = $(this).data('value'); // 若有 data-value 屬性
    
    console.log('選擇了：', selectedText, selectedVal);
    // 觸發業務邏輯：更新頁面顯示、發送 AJAX 等
    updatePage(selectedText);
});

若組件提供官方 API

優先查閱文檔使用官方事件，如 Select2：

$('#XY').select2().on('select2:select', function(e) {
    const data = e.params.data;
    console.log(data.id, data.text);
});

注意事項

• 組件若阻止冒泡（stopPropagation），委託失效，需直接綁定面板容器（需在組件打開後綁定）。
• 動態生成的面板可能附加到 body，選擇器調整為 $(document).on('click', '.dropdown-panel a', ...)。
• 無障礙：確保鍵盤 Enter/Space 也能觸發選中。