儘管使用了.on（）

動態創建的元素不會觸發事件請注意，我已經使用.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的代碼仍然沒有被觸發。我無法弄清楚什麼是錯的。

來源

2016-08-11 Somenath Sinha

'$（」（'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

你誤解了這個差異和click(..)

之間的整點是，當你綁定事件.deleteBtn還不存在，所以如果你使用嘗試綁定一個事件，它沒有任何區別.deleteBtn使用on或click,，因爲它不存在。

但#orderList已經在頁面上，所以你可以綁定一個事件監聽器。你可以不喜歡它：

$(document).ready(function() { 
    // this code runs once on document.ready - .deleteBtn doesn't exist 
    $('#orderList').click(function(event){ 
    // this code runs every time #orderList receives a click - .deleteBtn may exist at this point 
    if($(event.target).closest('.deleteBtn').length > 0) { 
     // click happened on .deleteBtn or one of its children 
    } 
    }) 
})

這樣，你捕獲#orderList這種情況發生的點擊，然後檢查event.target爲#orderList內的確切元素冒泡事件。該on方法結合的情況下，其提供的參數做檢查你，所以你會重寫上面爲：

$(document).ready(function() { 
    $('#orderList').on('click', '.deleteBtn', function(event){ 
     // click happened on .deleteBtn or one of its children 
    }) 
})

我已經更新您的提琴證明 - https://jsfiddle.net/9bjszpxa/3/

來源

2016-08-12 00:20:42

儘管使用了.on（）

回答

相關問題