動態創建的元素不會觸發事件請注意,我已經使用.on函數,因爲大多數答案都提示。這個問題與同一類別的其他問題大不相同。儘管使用了.on()
我的HTML代碼爲:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Stack</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div>
<h1>Enter Your Order</h1>
<div id="orderBox">
<input type="textbox" id="name" placeholder="Name">
<input type="textbox" id="order" placeholder="Order">
<input type="submit" id="submit" value="Order Now">
</div>
</div>
<div id="orderList">
<h1>Pending Order List</h1>
<p class="orderDisp">
<span class="orderId">OrderID:</span> 1 <span class="orderName">Name:</span> John Doe <span class="orderContent">Order:</span> CheeseBurger
<img class="deleteBtn" src="images/delete.png" alt="Delete Order">
</p>
<p class="orderDisp">
<span class="orderId">OrderID:</span> 2 <span class="orderName">Name:</span> Jane Doe <span class="orderContent">Order:</span> Steak
<img class="deleteBtn" src="images/delete.png" alt="Delete Order">
</p>
<p class="orderDisp">
<span class="orderId">OrderID:</span> 3 <span class="orderName">Name:</span> Santa Claus <span class="orderContent">Order:</span> Chicken Zinger Burger
<img class="deleteBtn" src="images/delete.png" alt="Delete Order">
</p>
</div>
</div>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
我的CSS是:
body {
font-family: Verdana, sans-serif;
font-size: medium;
background: #F2E5A0 url(images/The-Cheeseburger.png) no-repeat;
background-size: cover;
padding: 50px;
}
h1 {
color: #000;
}
#orderBox {
background-color: #B7BBDC;
padding: 25px;
}
#name {
width: 200px;
text-align: center;
}
#order {
width: 500px;
}
#container {
opacity: 0.8;
background-color: #F2C095;
padding: 50px;
min-width: 875px;
}
.orderDisp {
background-color: #A6D98F;
padding: 20px;
position: relative;
}
.orderId, .orderName, .orderContent {
font-weight: bold;
padding-left: 20px;
color: #223A2B;
}
.deleteBtn {
height: 20px;
vertical-align: middle;
text-align: right;
position: absolute;
top: 35%;
left: 95%;
}
我jQuery是:
$(document).ready(function() {
var orderId=4; // Starting form 4
$("#submit").click(function() {
var orderName = $("#name").val();
var orderContent = $("#order").val();
orderName = orderName.trim();
orderContent = orderContent.trim();
if((orderName !== "") && (orderContent !== ""))
{
$p = $('<p class="orderDisp">');
var content = '<span class="orderId">OrderID:</span> '+orderId+' <span class="orderName">Name:</span> '+orderName+' <span class="orderContent">Order:</span> '+orderContent;
content += '<img class="deleteBtn" src="images/delete.png" alt="Delete Order">';
$p.append(content);
$p.appendTo('#orderList');
}
$("#name").val("");
$("#order").val("");
});
$("#order").keydown(function(e) {
if(e.keyCode == 13)
$("#submit").click();
});
$(".deleteBtn").on('click',function() {
$(this).parent().remove();
});
});
說明問題,here's a working fiddle。
我知道動態創建的元素(通過代碼創建的元素)通常不會由.click()
事件處理程序正常觸發。必須使用.on("event", function() { ...code...});
將事件綁定到元素。我已經這樣做了。但是,不知何故,deleteBtn的代碼仍然沒有被觸發。我無法弄清楚什麼是錯的。
'$(」 ('click','.deleteBtn',function(){' – Tushar
@Tushar將'$(「。deleteBtn」)。on('click',function(){... code .. 。'不工作?因爲我嘗試了它,並且它不工作。任何想法爲什麼,先生? –
@SomenathSinha您需要將'.on()'事件處理程序附加到祖先元素上,而不是選擇器本身,因此Tushar說會工作,但'$(「。deleteBtn」)。on('click',function(){... code ...}'不會,你可以看看[這裏](http://api.jquery.com/on/#direct-and-delegated-events) – DarkAjax