使用jquery显示ajax响应按钮id

Question

我想显示一个按ajax响应获取的按钮ID

我使用这些代码行来休息按钮

的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文件中嵌入的详细信息（complaints.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>

Answer 1

您的按钮是根据AJAX响应动态创建的，因此您无法将点击事件直接附加到按钮上，因为此时它并不存在于DOM中。

使用Event Delegation，并将事件委托给更高级别的内容，例如document。这意味着传递给.on的选择器将检查所有点击，因此所有点击事件都会冒泡并由您的函数处理（如果它与选择器匹配）。

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