Javascript 单击按钮调用函数

我写的剧本如下：

<script type="text/javascript">
    $(document).ready(function(){
        $("#Click").click(function(){
            var data1 = new Object();
            data1.name = $('#databases').val();
            $.ajax({
          url : "form_submit",
          type : 'POST',
          data : data1,
          dataType : "text",              
          success : function(data){
            data = JSON.parse(data);
            var output="<table id=tableStyle>";
            output+="<tr>" + "<th>" + "REPORTSUITE_ID" + "</th>" + "<th>" + "REPORTSUITE_NAME" + "</th>" + "<th>" + "STAGING_DATABASE" + "</th>" + "<th>" + "DWH_DATABASE" + "</th>" + "</tr>";
            for (var i in data)
            {
                output+="<tr>" + "<td>" + data[i].REPORTSUITE_ID + "</td>" + "<td>" + "<button type = \"buttion\" id =\"tableList\">" + data[i].REPORTSUITE_NAME + "</button>" + "</td>" + "<td>" + data[i].STAGING_DATABASE + "</td>" + "<td>" + data[i].DWH_DATABASE + "</td>" + "</tr>";
            }
            output += "</table>";
            document.getElementById("placeholder").innerHTML=output;
          }
          });
        });
        });
    $("#tableList").click(function(){
            alert("this is data");
            });
</script>

<script>
    $(document).on("ready",function(){
        $("#placeholder").on("click","button",function(event){
            alert("id is " + this.id + "for database " + $('#databases').val())
        })
    });
</script>

$（文档）.ready（函数（）{
$（“#单击”）。单击（函数（）{
var data1=新对象（）；
data1.name=$（'#databases'）.val（）；
$.ajax({
url:“提交表格”，
键入：“POST”，
数据：数据1，
数据类型：“文本”，
成功：功能（数据）{
data=JSON.parse（数据）；
var输出=”；
输出+=“+”+“+”报告套件\u ID“+”+“+”+”报告套件\u名称“+”+“+”+”暂存\u数据库“+”+“+”+”DWH\u数据库“+”+”；
用于（数据中的var i）
{
输出+=+++数据[i]。报告套件ID+++++数据[i]。报告套件名称++++++数据[i]。暂存数据库++++数据[i]。DWH数据库+++；
}
输出+=“”；
document.getElementById（“占位符”）.innerHTML=输出；
}
});
});
});
$（“#表格列表”）。单击（函数（）{
警报（“这是数据”）；
});

单击id=tableList的按钮时，我希望显示带有消息“这是数据”的警报，但它不显示任何内容。 我还尝试在不同的标签之间粘贴与id为tableList的按钮点击相关的代码，但仍然不起作用。

---

请帮助

Hi used event delegation解决上述问题，如下所示：

<script type="text/javascript">
    $(document).ready(function(){
        $("#Click").click(function(){
            var data1 = new Object();
            data1.name = $('#databases').val();
            $.ajax({
          url : "form_submit",
          type : 'POST',
          data : data1,
          dataType : "text",              
          success : function(data){
            data = JSON.parse(data);
            var output="<table id=tableStyle>";
            output+="<tr>" + "<th>" + "REPORTSUITE_ID" + "</th>" + "<th>" + "REPORTSUITE_NAME" + "</th>" + "<th>" + "STAGING_DATABASE" + "</th>" + "<th>" + "DWH_DATABASE" + "</th>" + "</tr>";
            for (var i in data)
            {
                output+="<tr>" + "<td>" + data[i].REPORTSUITE_ID + "</td>" + "<td>" + "<button type = \"buttion\" id =\"tableList\">" + data[i].REPORTSUITE_NAME + "</button>" + "</td>" + "<td>" + data[i].STAGING_DATABASE + "</td>" + "<td>" + data[i].DWH_DATABASE + "</td>" + "</tr>";
            }
            output += "</table>";
            document.getElementById("placeholder").innerHTML=output;
          }
          });
        });
        });
    $("#tableList").click(function(){
            alert("this is data");
            });
</script>

<script>
    $(document).on("ready",function(){
        $("#placeholder").on("click","button",function(event){
            alert("id is " + this.id + "for database " + $('#databases').val())
        })
    });
</script>

$（文档）.on（“就绪”，函数（）{
$（“#占位符”）。在（“单击”、“按钮”上，函数（事件）{
警报（“id为“+this.id+”表示数据库“+$（“#数据库”）.val（））
})
});

---

正在正确传递该值。谢谢你的指针。

当执行

$（“#tableList”）.click（）

时，DOM中还不存在该元素。可以在元素添加到DOM后执行此操作，也可以使用事件委派。ID在HTML文档中必须是唯一的–由于您在循环中创建元素，因此将多次生成相同的ID。要么在id值中附加索引之类的内容，要么改用类。我在单独的标记和之间编写了代码，这也是文档准备好使用此--$（文档）时要运行的代码。ready（function（）{，但仍然不起作用，请告诉我如何做。另外，我不知道事件删除我尝试使用类，但它不起作用“我尝试使用类，但它不起作用”——如果zou绑定事件处理程序时不存在该类的元素，那么情况也是一样。“我也不知道事件委派”——那么请研究一下。