Question

我用PHP动态创建了一些带有ID的按钮。当我单击一个按钮时，我想获取ID以与Ajax一起使用。但是，当我单击该按钮时，有时它可以工作，但有时却不起作用，我也不知道为什么。即使我不刷新页面并单击按钮几次，也会得到不同的结果。

Javascript：

$(document).ready(function(){
   var deleteButtons = document.getElementsByClassName("delete");
   var i;
   for(i = 0; i < deleteButtons.length; i++){        
        deleteButtons[i].onclick = function(e){         
            var id = e.target.id;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.status == 200){                  
                    document.getElementById("deleteUser").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "lib/ajax/getusernamebyid.php?userid="+id, true);
            xmlhttp.send();
        };  
        deleteButtons[i].disabled = false;
    }
});

HTML按钮

<button class="btn btn-danger btn-sm delete" id="2" data-toggle="modal" data-target="#delete"><i class="fas fa-trash" aria-hidden="true"></i></button>

Answer 1

我想问题是您的某些按钮有孩子。
如果是这样，有时在单击按钮时，实际上是在单击其子级之一。因此target不会成为您的按钮，并且您将无法通过target.id获取该按钮的ID。
解决方案是使用e.currentTarget.id来确保获得要单击的按钮的ID：

$(document).ready(function(){
   var deleteButtons = document.getElementsByClassName("delete");
   var i;
   for(i = 0; i < deleteButtons.length; i++){        
        deleteButtons[i].onclick = function(e){         
            var id = e.target.id;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.status == 200){                  
                    document.getElementById("deleteUser").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "lib/ajax/getusernamebyid.php?userid="+id, true);
            xmlhttp.send();
        };  
        deleteButtons[i].disabled = false;
    }
});

Answer 2

您应该使用脚本内的console.log调试此代码。

我建议您使用Jquery委托

$("body").delegate(".delete","click",function(){ //your logic here  })

或在新版本的Jquery中

$(document).on(".delete","click",function(){ //your logic here})

或使用纯JavaScript

document.addEventListener("click", function(e) {
for (var target=e.target; target && target!=this; target=target.parentNode) {
    if (target.className == "delete") {
        //your logic
        break;
    }
}}, false);

为什么我不总是获得元素的ID？

2 个答案: