Javascript 事件委派-无法更改按钮类别和值
我正试图使用香草javascript禁止用户并删除他们的禁令。我使用的是datatables,所以我必须使用事件委派来触发事件 但当我禁止用户时,我不能改变按钮的类别或值,我该怎么做呢Javascript 事件委派-无法更改按钮类别和值,javascript,event-delegation,Javascript,Event Delegation,我正试图使用香草javascript禁止用户并删除他们的禁令。我使用的是datatables,所以我必须使用事件委派来触发事件 但当我禁止用户时,我不能改变按钮的类别或值,我该怎么做呢 document.querySelector(".m-portlet__body").addEventListener("click", function (e) { if (e.target.className === "btn btn-danger btn-sm btn-block") {
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不会替换原始字符串,而是返回一个新字符串
e.target.className = e.target.className.replace("btn-danger","btn-success")
将更改e.target.className值
如果目标是按钮元素,而不是
input[type=button]
,则不能使用e.target.value更改其文本内容,需要使用e.target.textContent=“New value” JS字符串是不可变的,这意味着String#replace不会替换原始字符串,而是返回一个新字符串
e.target.className = e.target.className.replace("btn-danger","btn-success")
将更改e.target.className值
如果目标是按钮元素,而不是
input[type=button]
,则不能使用e.target.value更改其文本内容,需要使用e.target.textContent=“New value” 尝试使用e.currentTarget而不是e。target@ChrisLi它返回null,您是否在onreadystatechange中获得正确的目标?@ChrisLi target使用if语句进行过滤,那么它如何更改?请尝试使用e.currentTarget而不是e。target@ChrisLi它返回空值,onreadystatechange中是否有正确的目标?@ChrisLi target使用if语句进行过滤,它如何更改?因此e.target返回字符串,而不是对象本身?e.target返回HtmleElement,而不是字符串。className是e.target的属性。因此e.target返回字符串,而不是对象本身?e.target返回HtmleElement,而不是字符串。className是e.target的一个属性。