您如何將“onclick”事件附加到Bootstrap 5 下拉選單，以便您可以根據單擊的下拉選單項執行應用程式邏輯？
檔案解釋了如何在下拉選單打開和關閉時接收事件，但似乎沒有任何方法可以找到單擊的選單項。我什至嘗試將 jQuery 單擊事件附加到選單項，但這似乎被阻止了。
我的下拉選單看起來像：
<div class="mb-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="tuningSelectButton" data-bs-toggle="dropdown" aria-expanded="false">
Select Tuning
</button>
<ul id="tuning-options" class="dropdown-menu" aria-labelledby="tuningSelectButton">
<li><a class="dropdown-item" href="#" data-tuning="value1">1</a></li>
<li><a class="dropdown-item" href="#" data-tuning="value2">2</a></li>
<li><a class="dropdown-item" href="#" data-tuning="value3">3</a></li>
</ul>
</div>
我的 Javascript 看起來像：
$('#tuning-options li a').change(function(){
var el = $(this);
console.log(el.val())
});
uj5u.com熱心網友回復：
如果你試圖獲得價值，data-tuning那么你應該改變
console.log(el.val())
進入
console.log(el.data('tuning'))
查看 JQuery 的 API 檔案以了解更多資訊。 https://api.jquery.com/data/
uj5u.com熱心網友回復：
也許是這樣的：
$('#tuning-options').on('click', (e) => {
const data = e.target.dataset.tuning;
if(!data) return;
console.log(data);
});
uj5u.com熱心網友回復：
- 從檔案：
hide.bs.dropdown和hidden.bs.dropdown事件有一個clickEvent屬性（僅當原始事件型別為 時click），其中包含單擊事件的事件物件。
- Bootstrap 下拉選單依賴于它的標記（HTML 結構）。特別是，
.dropdown-toggle和.dropdown-menu都必須包裝到一個.dropdown元素中。Bootstrap 使用這個包裝器作為下拉事件發射器。
另外，你應該移動tuning-options從ID.dropdown-menu的.dropdown包裝。
此時這應該起作用：
$('#tuning-options').on('hide.bs.dropdown', ({ clickEvent }) => {
if (clickEvent?.target) {
console.log($(clickEvent.target).data('tuning'))
}
})
作業示例：
顯示代碼片段
$('#tuning-options').on('hide.bs.dropdown', ({ clickEvent }) => {
if (clickEvent?.target) {
console.log($(clickEvent.target).data('tuning'))
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown" id="tuning-options">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dmb1" data-bs-toggle="dropdown" aria-expanded="false">
Select tuning
</button>
<ul class="dropdown-menu" aria-labelledby="dmb1">
<li><a class="dropdown-item" data-tuning="value1" href="#">Tuning 1</a></li>
<li><a class="dropdown-item" data-tuning="value2" href="#">Tuning 2</a></li>
<li><a class="dropdown-item" data-tuning="value3" href="#">Tuning 3</a></li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/402135.html
標籤：javascript 查询 推特引导 bootstrap-5