事件委派 - 无法更改按钮 class 和值
Event Delegation - cant change button class and value
我正在尝试使用 vanilla javascript 禁止用户并解除他们的禁令。我正在使用数据表,所以我必须使用事件委托来触发事件..
但是当我禁止用户后,我无法更改按钮 class 或值,我该怎么做?
document.querySelector(".m-portlet__body").addEventListener("click", function (e) {
if (e.target.className === "btn btn-danger btn-sm btn-block") {
console.log(e.target)
let id = e.target.dataset.id,
xhr = new XMLHttpRequest(),
token = document.head.querySelector("[name=csrf-token]").content;
xhr.open("POST", "users/ban/" + id);
xhr.setRequestHeader("X-CSRF-TOKEN", token);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
let response = JSON.parse(xhr.responseText);
if (xhr.status === 200 && response.status === 'OK') {
e.target.className.replace("btn-danger","btn-success");
e.target.value = "Remove Ban"
//I also try with;
//e.target.classList.remove("btn-danger");
//e.target.classList.add("btn-success");
} else {
console.log('failed');
}
}
}
xhr.send();
}
if (e.target.className === "btn btn-success btn-sm btn-block"){
}
})
JS 字符串是不可变的,这意味着 String#replace 不会替换原始字符串,而是 return 一个新字符串。
e.target.className = e.target.className.replace("btn-danger","btn-success")
将更改 e.target.className 值
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
如果目标是按钮元素而不是 input[type=button]
那么你不能用 e.target.value 改变它的文本内容,你需要使用 e.target.textContent = "New value" ;
我正在尝试使用 vanilla javascript 禁止用户并解除他们的禁令。我正在使用数据表,所以我必须使用事件委托来触发事件..
但是当我禁止用户后,我无法更改按钮 class 或值,我该怎么做?
document.querySelector(".m-portlet__body").addEventListener("click", function (e) {
if (e.target.className === "btn btn-danger btn-sm btn-block") {
console.log(e.target)
let id = e.target.dataset.id,
xhr = new XMLHttpRequest(),
token = document.head.querySelector("[name=csrf-token]").content;
xhr.open("POST", "users/ban/" + id);
xhr.setRequestHeader("X-CSRF-TOKEN", token);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
let response = JSON.parse(xhr.responseText);
if (xhr.status === 200 && response.status === 'OK') {
e.target.className.replace("btn-danger","btn-success");
e.target.value = "Remove Ban"
//I also try with;
//e.target.classList.remove("btn-danger");
//e.target.classList.add("btn-success");
} else {
console.log('failed');
}
}
}
xhr.send();
}
if (e.target.className === "btn btn-success btn-sm btn-block"){
}
})
JS 字符串是不可变的,这意味着 String#replace 不会替换原始字符串,而是 return 一个新字符串。
e.target.className = e.target.className.replace("btn-danger","btn-success")
将更改 e.target.className 值
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
如果目标是按钮元素而不是 input[type=button]
那么你不能用 e.target.value 改变它的文本内容,你需要使用 e.target.textContent = "New value" ;