如何从动态按钮获取ID？ （jQuery的）
[英]How get id from dynamic button ? (jQuery)
问题描述
I use jQuery & PDO to dynamic a pagination 
我使用jQuery和PDO动态分页
When I create some button which have id = xx 当我创建一些id = xx button
Then use jQuery try get one of button id , It isn't work 然后使用jQuery尝试获取button id之一，这是行不通的
This is my code: 这是我的代码：
$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;
This is my jQuery code: 这是我的jQuery代码：
$(document).ready(function(){
$("button").click(function(){
alert(this.id);
});
});
If I code : 如果我编码：
<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>
when I click the button which id = 1 ,It is work 当我单击id = 1的button时，这是可行的
But dynamic button isn't working... 但是动态按钮不起作用...
What worng in my code ?? 我的代码中有什么？
3 个解决方案
解决方案1
4 已采纳 2016-01-13 12:50:36
You have to bind click handler using .on() for dynamically created elements, see below code 您必须使用.on()为动态创建的元素绑定点击处理程序，请参见以下代码
$(document).ready(function(){
$(document).on("click","button",function(){
alert(this.id);
});
});
解决方案2
2 2016-01-13 12:53:33
Sorry I just saw that you talking about dynamic added buttons. 抱歉，我刚刚看到您在谈论动态添加按钮。 I'm quite sure that delegated event handlers would help: http://api.jquery.com/on/ 我很确定委派的事件处理程序会有所帮助： http : //api.jquery.com/on/
Explanation of your problem: 您的问题的解释：
As you append your html dynamically, the newly created DOM objects don't have the event handlers attached because the code that attaches the handler has already run. 在动态附加html时，新创建的DOM对象没有附加事件处理程序，因为附加处理程序的代码已经运行。
With delegated event handlers , you attach your event handlers to the parent element that exists at the time we run the code (it's document in this case). 使用委托的事件处理程序 ，您可以将事件处理程序附加到运行代码时存在的父元素（在本例中为文档）。 When the child elements are clicked (no event handlers), the event is bubbled up by browser and is handled by its parent (with event handlers attached) 单击子元素时（无事件处理程序），事件由浏览器冒泡并由其父项处理（附加了事件处理程序）
Example 例
$(document).on('click',".close_fast",function(event){
alert("hi");
});
解决方案3
0 2016-01-13 13:03:41
Your code says: 您的代码说：
$HTML.='<td><button class = click id ='.$row['id']. '>詳情</button></td>';
Shouldn't that be: 那不应该是：
$HTML.='<td><button class="click" id="'.$row['id']. '">詳情</button></td>';
Otherwise the HTML is invalid. 否则，HTML无效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.