代码之家  ›  专栏  ›  技术社区  ›  Teoman Tıngır

事件委托-不能更改按钮类和值

  •  0
  • Teoman Tıngır  · 技术社区  · 6 年前

    我正在尝试禁止用户使用vanilla javascript并删除他们的禁令。我使用的是datatables,所以我必须使用事件委派来触发事件。。

    但当我禁用用户时,我不能更改按钮类或值,我该怎么做呢?

    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"){
    
            }
        })
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   mpm    6 年前

    JS字符串是不可变的,这意味着String#replace不会替换原始字符串,而是返回一个新字符串。

     e.target.className = e.target.className.replace("btn-danger","btn-success")
    

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

    如果目标是按钮元素而不是 input[type=button] 那么你就不能用e来改变它的文本内容。目标值,您需要使用e。目标.textContent=“新值”;