Question

我使用jQuery＆amp; PDO动态分页

当我创建一些具有button

的id = xx时

然后使用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>

当我点击button时id = 1，这是工作

但动态按钮无效......

我的代码中有什么内容？

Answer 1

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

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

<强> More Information - .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 个答案:

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

3 个答案:

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