Question

请注意，我已经使用.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的代码。我无法弄清楚出了什么问题。

Answer 1

您误解了on('click', ...)和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/

尽管使用.on（），但动态创建的元素不会触发事件

1 个答案: