javascript - 使用jquery显示ajax响应按钮id

Question

这个问题已经有答案了:

jQuery doesn't work after content is loaded via AJAX (9 个回答)

已关闭 9 年前。

我想显示一个通过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 ，并将事件委托(delegate)给更高层的事物，例如文档。这意味着所有点击都将由传递给 .on 的选择器进行检查，因此所有点击事件都会冒泡并由您的函数处理(如果它与选择器匹配)。

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