我所在的表行正在通过我的ajax回报.appended表。
I have a table where the table rows are being .appended through my ajax return.
Ajax调用/返回
$("#searchButton").click(function(){
var lastName = $('#lastName').val();
var data = {
action: 'mysearch',
post_lastName: lastName
};
$.post(
the_ajax_script.ajaxurl,
data,
function(response)
{
$("#searchResults").append(response);
}
);
return false;
});
HTML文件的形式显示搜索结果。
HTML file where the search results appear
<div class="retained intake_content">
<table id="searchResults" style="width:80%">
</table>
</div>
<style>
#searchResults tr:hover {
background-color: orange;
cursor: pointer;
}
</style>
和我的PHP检索从SQL的信息和呼应创建的表行。
And my php for retrieving the info from SQL and echoing the created table row.
while($row = $stmt ->fetch(PDO::FETCH_ASSOC)){
$firstName = $row['first_name'];
$lastName = $row['last_name'];
$id = $row['id'];
echo '<tr><td>' . $firstName .'</td><td>' . $lastName . '</td><td>' . $id .'</td><td><button type="button" id="personid" name="rowId" value="' . $id . '"> View</button></td></tr>';
}
我的测试,看看是否被点击的按钮。
My test to see if the button was clicked.
$("#personid").click(function(){
//var id =$(this).val();
console.log("Clicked");
alert('Row has been clicked');
});
我增加了一个按钮,rowsid与使用JQuery。点击()事件的ID发送到另一个AJAX调用来检索的详细信息的意图ID。问题是我不能让JQuery的。点击()通知所有。那么我想,如果将console.log的工作,它没有。
I added a button with the id of rowsid with the intention of using JQuery .click() event to send the ID to another ajax call to retrieve more detailed information. The problem is I can not get the JQuery .click() to alert at all. I then tried if console.log would work and it did not.
所以我猜.append()已经很多做这个问题,或者我呼应表的方式吗?任何帮助将大大AP preciated。
So I am guessing .append() has alot to do with this issue or the way I echoed the table? Any help would be greatly appreciated.
顺便说一句,这是在一个字preSS插件...
BTW this is in a wordpress plugin...
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-ui.css"/>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="jquery-ui-1.11.4.js"></script>
<title>Dialog</title>
<script type="text/javascript">
$('document').ready(function(){
$('#search').click(function(){
$.get( 'table.php' ,function(data) {
$('#tb').append(data);
});
return false;
});
$('#tb').on('click','tr',function(){
alert($(this).attr('personID'));
})
});
</script>
</head>
<body>
<style>
table,tr,td{ border:1px solid #000;border-collapse:collapse;}
</style>
<table id="tb">
</table>
<a href="#" id="search">Search</a>
</body>
</html>
PHP
<?php
echo '<tr personID="1"><td>1</td><td>2</td></tr>';
echo '<tr personID="2"><td>3</td><td>4</td></tr>';
?>