使用jquery显示ajax响应按钮id


Display the ajax response button id using jquery

我想显示一个按钮id,这是通过ajax响应

我使用这些行代码获得按钮的休息

index . php

<script language="JavaScript">
        var XMLHttpRequestObject=false;
        if(window.XMLHttpRequest){
            XMLHttpRequestObject = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
        }
        function getData(){
            var district_id = 'D01';
            var queryString = "?district_id=" + district_id ;
            XMLHttpRequestObject.onreadystatechange = function(){
                if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
                    var container = document.getElementById('issues');
                    var response = XMLHttpRequestObject.responseText;
                    container.innerHTML = response;
                }
            }
            XMLHttpRequestObject.open("GET", "complaints.php"+queryString ,true);
            XMLHttpRequestObject.send(null);
        }
    </script>

并在相同的index.php

中显示这些区域的代码
<div id="issues">
    </div>

现在我可以显示嵌入在这个php文件(complain .php)

中的详细信息了
<?php
$district_id = $_GET['district_id'];
echo '<button id="'.$district_id.'">'.$district_id.'</button>';
?>

现在我的问题是我需要动态的按钮id

因此使用下面的jquery我正在尝试这个代码,但它不工作

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>        
        $(document).ready(function(){
        getData();
            $("button").click(function(){
                var id = $(this).attr("id");
                alert(id);
            });
    }); 
</script>

您的按钮是根据AJAX响应动态创建的,因此您不能将click事件直接附加到按钮onload上,因为当时它还不存在于DOM中。

使用事件委托,并将事件委托给更高级别的机构,例如document。这意味着所有的点击都将被传递给.on的选择器检查,所以所有的点击事件都将冒泡出来,并由你的函数处理(如果它匹配选择器)。

$(document).on('click', 'button', function(){
    var id = $(this).attr("id");
    alert(id);
});