如何从动态按钮获取ID？（jQuery的）

Question

我使用jQuery和PDO动态分页

当我创建一些id = xx button

然后使用jQuery尝试获取button id之一，这是行不通的

这是我的代码：

$records    = $databaseConnection->query("SELECT * FROM area ORDER BY FIELD(local,'Earth','Mars','Mercury','Sun')LIMIT $start, $records_per_page");
$count      = $records->rowCount();
$HTML='<table border="1"><tr><th>local</th><th>target</th><th>detail</th></tr>';
if($count > 0)
{
    foreach($records as $row) {
        $HTML.='<tr>';
        $HTML.='<td>'.$row['local'].'</td>';
        $HTML.='<td>'.$row['target'].'</td>';
        $HTML.='<td><button class = click id ='.$row['id']. '>detail</button></td>';
        $HTML.='</tr>';

    }
$HTML.='</table>';
}

else
{
    $HTML='No Data Found';
}
echo $HTML;
echo $pagination;

这是我的jQuery代码：

$(document).ready(function(){
  $("button").click(function(){
    alert(this.id);
  });
});

如果我编码：

<html>
    <head>
        <title> Planet </title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script type="text/javascript" src="library/jQuery/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    alert(this.id);
                });
            });
        </script>
    </head>
    <body>

    (dynamic of pagination code)
    ...
    ...
    ...

    <button id = "1"> try </button>
    </body>
</html>

当我单击id = 1的button时，这是可行的

但是动态按钮不起作用...

我的代码中有什么？

Answer 1

您必须使用.on()为动态创建的元素绑定点击处理程序，请参见以下代码

$(document).ready(function(){
  $(document).on("click","button",function(){
    alert(this.id);
  });
});

更多信息-.on（）

Answer 2

抱歉，我刚刚看到您在谈论动态添加按钮。 我很确定委派的事件处理程序会有所帮助： http : //api.jquery.com/on/

您的问题的解释：

在动态附加html时，新创建的DOM对象没有附加事件处理程序，因为附加处理程序的代码已经运行。

使用委托的事件处理程序 ，您可以将事件处理程序附加到运行代码时存在的父元素（在本例中为文档）。 单击子元素时（无事件处理程序），事件由浏览器冒泡并由其父项处理（附加了事件处理程序）

例

$(document).on('click',".close_fast",function(event){
     alert("hi");
 });

Answer 3

您的代码说：

$HTML.='<td><button class = click id ='.$row['id']. '>詳情</button></td>';

那不应该是：

$HTML.='<td><button class="click" id="'.$row['id']. '">詳情</button></td>';

否则，HTML无效。

如何从动态按钮获取ID？（jQuery的）

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-01-13 12:50:36

解决方案2
2 2016-01-13 12:53:33

解决方案3
0 2016-01-13 13:03:41

如何从动态按钮获取ID？ （jQuery的）

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-01-13 12:50:36

解决方案2 2 2016-01-13 12:53:33

解决方案3 0 2016-01-13 13:03:41

如何从动态按钮获取ID？（jQuery的）

解决方案1
4 已采纳 2016-01-13 12:50:36

解决方案2
2 2016-01-13 12:53:33

解决方案3
0 2016-01-13 13:03:41