尽管使用了.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（）

回答

相关问题