我遇到了一個似乎未解決的問題，我希望這些天有人能給出答案。
基本上按照標題，我在引導卡中有一個復選框，它有一個 .on("click"..) 來切換復選框。但是，我無法讓復選框不將其事件冒泡到卡片上，這實際上使單擊復選框毫無用處。
我試過每一種組合
event.stopPropogation()
event.preventDefault()
event.stopImmediatePropogation()
return false
有，沒有什么能阻止它。我在點擊和更改事件上都這樣做了。
我在這個執行緒中看到有一種叫做 legacy-pre-activation-behavior 的東西，但沒有提供解決方案。
我的 HTML（在 js 中）如下：
let card = $("<div class='card' style='cursor: pointer'></div>")
let cardHeader = $("<div class='card-header'></div>")
let cardHeaderRow = $("<div class='row'></div>")
let selectAccount = $(`<input type='checkbox' data-uam-linkeditem=${account} class='col-sm-1 btn btn-outline-primary account-select' title='Select Account'/>`)
selectAccount.prop("checked", preCheckBoxes)
selectAccount.on("click", (e) => {
e.stopPropagation()
return false
})
selectAccount.on("change", (e) => {
e.stopPropagation()
return false
})
card.on('click', (event) => {
selectAccount.prop("checked", !selectAccount.prop("checked"))
})
card.append(cardHeader)
cardHeader.append(cardHeaderRow)
cardHeaderRow.append(selectAccount)
有什么想法嗎？謝謝你的時間 ：）
uj5u.com熱心網友回復：
所以這個問題似乎沒有答案。input我圍繞使用 Font Awesome Icons 而不是元素創建了自己的作品。
let card = $("<div class='card' style='cursor: pointer'></div>")
let cardHeader = $("<div class='card-header'></div>")
let cardHeaderRow = $("<div class='row'></div>")
let selectIconClass = preCheckBoxes ? 'fas fa-check-square' : 'far fa-square'
let selectDivCheckedClass = preCheckBoxes ? 'checked' : 'unchecked'
let selectAccount = $(`<div class='col-sm-1 account-select ${selectDivCheckedClass}'><i class='${selectIconClass} text-primary' /></div>`)
card.on('click', (event) => {
if (selectAccount.hasClass('checked')) {
selectAccount.removeClass('checked').addClass('unchecked')
selectAccount.children().removeClass(['fas', 'fa-check-square']).addClass(['far', 'fa-square'])
} else {
selectAccount.addClass('checked').removeClass('unchecked')
selectAccount.children().addClass(['fas', 'fa-check-square']).removeClass(['far', 'fa-square'])
}
})
card.append(cardHeader)
cardHeader.append(cardHeaderRow)
cardHeaderRow.append(selectAccount)
和 selectAll 代碼
selectAllBox.change((event) => {
let checked = event.target.checked;
let setAccountSelectToClass = checked ? 'checked' : 'unchecked'
let removeClassFromAccountSelect = !checked ? 'checked' : 'unchecked'
let iconClassesToSet = checked ? ['fas', 'fa-check-square'] : ['far', 'fa-square']
let iconClassesToRemove = !checked ? ['fas', 'fa-check-square'] : ['far', 'fa-square']
$(".account-select").each(function (i, selectAccount) {
selectAccount = $(selectAccount)
selectAccount.addClass(setAccountSelectToClass).removeClass(removeClassFromAccountSelect)
selectAccount.children().addClass(iconClassesToSet).removeClass(iconClassesToRemove)
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/533134.html