无法使用 JavaScript 在 HTML 表中放置带有事件侦听器的按钮
Unable to use JavaScript to put a button with an event listener in HTML table
我正在创建一个航班预订系统。一旦用户根据某些条件查询航班，我需要将服务器返回的数据显示在一个表格中，每行都有一个"立即预订"按钮来预订该特定航班。
我正在使用JavaScript来填充表格。我的问题是我无法使用自定义点击动态生成按钮。在 onclick 中，我想调用具有多个参数的函数。但不知何故，我的代码不起作用。
这是我附加到我的表格以使用自定义按钮生成表格单元格的 JavaScript 字符串 -
"<td><button id = 'bookButton' onclick=bookFlight('" + data['flight_no'] + "', '" + data['departure_destination'] + "', '" + data["arrival_destination"] + "', '" + data["seat_class"] + "', '" + data['departure_details'] + "') value='Book Now'></button></td>"
当我控制台记录此字符串时，输出实际上是我想要的。例如-
<td>JT216</td><td>Singapore</td><td>Bangkok</td><td>2013-12-01 18:00:00</td><td>2013-12-01 19:30:00</td><td>JetStar Air</td><td>B787</td><td>$100</td><td><button id = 'bookButton' onclick=bookFlight('JT216', 'Singapore', 'Bangkok', 'Economy', '2013-12-01 18:00:00') value='Book Now'></button></td>
但是，它没有正确添加到 DOM 中。这是页面源代码中单元格的外观 -
<button id="bookButton" onclick="bookFlight('JT216'," 'singapore',="" 'bangkok',="" 'economy',="" '2013-12-01="" 18:00:00')="" value="Book Now"></button>
有人可以告诉我为什么会这样吗？
我已经将我的代码精简到最基本的，以便它可以帮助您解决我的问题。这是可用于复制并自行查看问题的 HTML 文件。
<html>
<head>
<title>
Flight Reservation System
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class = "container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-fields">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Fly<em>Smart</em></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-fields">
<ul class="nav navbar-nav navbar-right">
<li><a href="/flightSearchPage.php">Search For Flights</a></li>
<li><a href="/flightSearchPage.php">Manage Booking</a></li>
<li><a href="/flightSearchPage.php">Admin Log In</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div id = "outerContainer">
<div id = "innerContainer" class = "row-fluid">
<form id = "searchForm" class = "text-center searchPos">
<fieldset>
<br/>
<div class = "row-fluid">
<label>Departure City: </label>
<select id = "depCities" name = "fromCity"></select>
<label> Arrival City: </label>
<select id = "arrCities" name = "toCity"></select>
<label>Seat Class: </label>
<select id = "seatClass" name = "class">
</select>
<label>Date of Departure:</label>
<input name = "departureDate" id = "depDate" type = "date"></input>
<strong>1</strong><input name = "numPeople" id = "numPeople" type = "range"
min = "1" max = "150" default = "1" onchange = "updateRangeValue();"></input><strong>150</strong>
<br/><strong>Selected Seats: <output id="numSelected"> </output></strong>
<br/><br/>
<input class = "btn btn-primary" type = "submit" value = "Search for Flights"></input>
</div>
</fieldset>
</form>
<br/>
<table id = "resultsTable" class = "table">
</table>
<br/>
<br/>
<p id = "Log"></p>
</div>
</div>
<script type="text/javascript">
$("#resultsTable thead").remove();
$("#resultsTable tbody").remove();
$("#resultsTable").append("<thead><tr>" + printTableHead() +"</tr></thead><tbody>");
tableData = [{0: "JT216", 1: "JetStar Air", 2: "Singapore",
3: "Bangkok",
4: "2013-12-01 18:00:00",
5: "2013-12-01 19:30:00",
6: "80",
7: "B787",
8: "Economy",
9: "80",
10: "100",
11: "JT216",
12: "2013-12-01 18:00:00",
arrival_destination: "Bangkok",
arrival_details: "2013-12-01 19:30:00",
available_seats: "80",
capacity: "80",
carrier_name: "JetStar Air",
departure_destination: "Singapore",
departure_details: "2013-12-01 18:00:00",
flight_no: "JT216",
plane_model_no: "B787",
price: "100",
seat_class: "Economy"}];
$.each(tableData, function() {
$("#resultsTable").append("<tr>" + printTupleData(this) +"</tr>");
console.log("<tr>" + printTupleData(this) +"</tr>");
});
$("#resultsTable").append("</tbody");
$("#resultsTable").append("</tbody");
function printTableHead() {
tuple = "";
tuple += ("<th>Flight Number</th>");
tuple += ("<th>From</th>");
tuple += ("<th>To</th>");
tuple += ("<th>Departure Date/Time</th>");
tuple += ("<th>Arrival Date/Time</th>");
tuple += ("<th>Airline</th>");
tuple += ("<th>Aircraft Model</th>");
tuple += ("<th>Price</th>");
tuple += ("<th>Book Option</th>");
return tuple;
};
function printTupleData(data) {
tuple = "";
tuple += ("<td>" + data["flight_no"] + "</td>");
tuple += ("<td>" + data["departure_destination"] + "</td>");
tuple += ("<td>" + data["arrival_destination"] + "</td>");
tuple += ("<td>" + data["departure_details"] + "</td>");
tuple += ("<td>" + data["arrival_details"] + "</td>");
tuple += ("<td>" + data["carrier_name"] + "</td>");
tuple += ("<td>" + data["plane_model_no"] + "</td>");
tuple += ("<td>$" + data["price"] + "</td>");
tuple += ("<td><button id = 'bookButton' onclick=bookFlight('" + data['flight_no'] + "', '" + data['departure_destination'] + "', '" + data["arrival_destination"] + "', '" + data["seat_class"] + "', '" + data['departure_details'] + "') value='Book Now'></button></td>");
console.log(tuple);
// tuple += ("<td><form id = 'bookForm'><fieldset><input value = 'Book Now' type = 'submit' class = 'btn btn-primary' id = 'bookButton'/></fieldset></form></td>");
//console.log(data["departure_details"]);
// flight ="
// + data["flight_no"] + " departureTime ='"+ data["departure_details"] +
// "' seatClass = "+ data["seat_class"] + "
//
return tuple;
};
</script>
</body>
</html>
如果你想
避免这种问题，我建议你看看HTML5数据属性：http://html5doctor.com/html5-custom-data-attributes/
您可以向按钮添加数据属性，如下所示：
<button class="book" data-flight-no="1" data-departure-destination="Belgium" data-arrival-destination="England">Book now</button>
你已经在代码中使用了jQuery。您可以像这样访问这些数据属性：
$('selector').data('flight-no');
请参阅此jsFiddle，了解如何在特定情况下实现此解决方案：http://jsfiddle.net/HN8JM/
这是因为您没有将属性括在引号中，因此它在第一个空格处结束。
... onclick='"bookFlight('" + data['flight_no'] + "', '" + data['departure_destination'] + "', '" + data["arrival_destination"] + "', '" + data["seat_class"] + "', '" + data['departure_details'] + "')'" ...
相关文章：
- 如何在for循环中添加事件侦听器
- 未命中服务器发送的事件侦听器
- 如何覆盖原型中的事件侦听器
- 无法将事件侦听器附加到画布
- 如何在d3.js中自定义事件侦听器
- 在es6中，将带有回调的事件侦听器设置为可迭代的
- 事件侦听器未在chrome扩展中的options.js中启动
- IE8更改文本区域上的事件侦听器不工作
- 将事件侦听器添加到文档，而不是签入元素存在，然后添加事件侦听器
- javascript删除事件侦听器
- 我应该/如何清除mousemove JQuery事件侦听器
- 在JQuery中使用谷歌地图Api事件/侦听器
- 如何使用我的Jquery代码创建委托事件侦听器
- 'mousemove'画布中的事件侦听器-指针仅在最后一个矩形中更改
- 为什么此事件侦听器不工作
- 是否可以在数字输入框中的小按钮中添加事件侦听器
- 在Google Chrome扩展中添加事件侦听器
- SVG元素在转换后会丢失事件侦听器
- jQuery事件侦听器多次启动
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器
