我正在尝试动态创建一个表，在表的每一行中我希望有一个按钮，它只会在该行上对地址进行地理定位。如果只有一行返回，如果有多行不是
，则下面的代码有效我真的很感激一些帮助，因为这让我感到疯狂，并提前感谢你们！
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "php/censusdata3.php",
data: data
}).success(function(data)
{
var tr, td;
var str;
$.each(data,function(index,point)
{
tbody = document.getElementById("tbody");
str=point.Readable;
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
//td.setAttribute("align", "center");
td.innerHTML = point.Forename;
td = tr.insertCell(tr.cells.length);
td.innerHTML = point.Surname;
td = tr.insertCell(tr.cells.length);
td.innerHTML = point.Age;
td = tr.insertCell(tr.cells.length);
td.innerHTML = '<input id="location-address" type="text" class="form-control" value="'+str+'" required/><button class="btn btn-primary btn-sm" id="map-address-btn"><span>Find Location</span></button>';
$(document).ready(function() {
// get map button functionality
$("#map-address-btn").click(function(event){
event.preventDefault();
var address = $("#location-address").val(); // grab the address from the input field
codeAddress(address); // geocode the address
});
});
});
});
更新代码：
}).success(function(data)
{
var tr, td;
var str;
$.each(data,function(index,point)
{
tbody = document.getElementById("tbody");
str=point.Readable;
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
//td.setAttribute("align", "center");
td.innerHTML = point.Forename;
td = tr.insertCell(tr.cells.length);
td.innerHTML = point.Surname;
td = tr.insertCell(tr.cells.length);// I think the i 's are what is breakingit!!
td.innerHTML = point.Age;
td = tr.insertCell(tr.cells.length);
td.innerHTML = '<input class="address" type="text" class="form-control" value="'+str+'" required/><button class="btn btn-primary btn-sm" id="map-address-btn"><span>Find Location</span></button>';
$(document).ready(function() {
$("table tbody").on("click", "button", function () { //listen for <button> clicks on your table
var btn = $(this); //reference to the clicked button
var tableRow = btn.closest("tr"); //find the table row the button is in.
var address = tableRow.find("input.address").val(); //find the input field in that row that you want
console.log(address ); display the value
});
// // get map button functionality
// $("#map-address-btn").click(function(event){
// event.preventDefault();
// var address = $("#location-address").val(); // grab the address from the input field
// codeAddress(address); // geocode the address
// });
});
}）;
进行更改的最新迭代：
<script type="text/javascript">
$("document").ready(function(){
$(".js-ajax-php-json").submit( function(e){
e.preventDefault();
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "php/censusdata3.php",
data: data
}).success(function(data)
{
var tr, td;
var str;
$.each(data,function(index,point)
{
tbody = document.getElementById("tbody");
str=point.Readable;
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
//td.setAttribute("align", "center");
td.innerHTML = point.Forename;
td = tr.insertCell(tr.cells.length);
td.innerHTML = point.Surname;
td = tr.insertCell(tr.cells.length);
td.innerHTML = point.Age;
td = tr.insertCell(tr.cells.length);
td.innerHTML = '<input type="text" class="form-control location-address" value="'+str+'" required/><button class="btn btn-primary btn-sm map-address-btn"><span>Find Location</span></button>';
});
});
return false;
});
});
});
</script>
这个小伙子在剧本的底部：
$(document).ready(function() {
// get map button functionality
$(".map-address-btn").click(function(event){
event.preventDefault();
var address = $(this).parent().find('.map-address-btn').val(); // grab the address from the input field
codeAddress(address); // geocode the address
});
});
现在桌子根本不会填充，再次感谢您的帮助。
答案 0 :(得分：2)
Ids需要单数，所以使用一个类。
<input class="address" ... />
现在改为多次点击并添加多个处理程序，只需在表体中添加一个并使用事件委托。
$("table tbody").off("click.geocode".on("click.geocode", "button", function () { //listen for <button> clicks on your table
var btn = $(this); //reference to the clicked button
var tableRow = btn.closest("tr"); //find the table row the button is in.
var address = tableRow.find("input.address").val(); //find the input field in that row that you want
console.log(address ); display the value
codeAddress(address); // geocode the address
});
此代码不必在Ajax调用的成功方法中，它可以附加document.ready或onload或在页面底部的表后面。
答案 1 :(得分：0)
就像我在评论中所说的那样，因为你的ID，它们必须是独一无二的。改用class：
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "php/censusdata3.php",
data: data
}).success(function(data)
{
var tr, td;
var str;
$.each(data,function(index,point)
{
tbody = document.getElementById("tbody");
str=point.Readable;
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
//td.setAttribute("align", "center");
td.innerHTML = point.Forename;
td = tr.insertCell(tr.cells.length);
td.innerHTML = point.Surname;
td = tr.insertCell(tr.cells.length);
td.innerHTML = point.Age;
td = tr.insertCell(tr.cells.length);
td.innerHTML = '<input type="text" class="form-control location-address" value="'+str+'" required/><button class="btn btn-primary btn-sm map-address-btn"><span>Find Location</span></button>';
});
});
$('#tbody').off("click",".map-adress-btn");
// get map button functionality
$('#tbody').on("click",".map-address-btn", function(event){
var address = $(this).parent().find('.location-address').val(); // grab the address from the input field
codeAddress(address); // geocode the address
});
工作小提琴：