Dynamically created elements don't trigger events despite using .on()

Question

NOTE that I'm already using .on function as most of the answers suggest. This problem is vastly different than other problems of the same category.

My HTML Code is :

<!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>

My CSS is :

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%;
}

My jQuery is :

$(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();
    });

});

To describe the problem, here's a working fiddle.

I know that dynamically created elements (elements created via code) are not triggered normally by .click() event handlers. One has to use .on("event", function() { ...code...}); to bind the event to the element. I've already done this. Yet, somehow, the deleteBtn's code is still not triggered. I can't figure out what's wrong.

@Tushar Would `$(".deleteBtn").on('click', function() {...code...}` not work? Coz I tried it, and it's not working. Any ideas why, Sir? — Somenath Sinha, Aug 11 '16 at 16:02
@SomenathSinha you need to attach the `.on()` event handler on an ancestor element, not the selector itself, therefore what Tushar said will work but `$(".deleteBtn").on('click', function() {...code...}` won't, as you can see [here](http://api.jquery.com/on/#direct-and-delegated-events) — DarkAjax, Aug 11 '16 at 16:06
@DarkAjax But by using Tushar's code, what we're effectively doing is selecting only those elements within `orderList` that have a class of `.deleteBtn`. How is that any different from directly selecting `.deleteBtn` elements? — Somenath Sinha, Aug 11 '16 at 16:12

Hugo Silva · Accepted Answer · 2016-08-12T00:27:01.663

You misunderstood the difference between on('click', ...) and click(..)

The whole point is that .deleteBtn doesn't yet exist when you bind the event, so it doesn't make any difference if you use try to bind an event to .deleteBtn using on or click, because it does not exist.

But #orderList is already on the page, so you can bind an event listener to it. You could do it like:

$(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
    }
  })
})

This way, you capture clicks that happen on #orderList, then check the event.target for the exact element inside of #orderList that bubbled up the event. The on method binds the event, and provides an argument to do that check for you, so you would rewrite the above as:

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

I have updated your fiddle to demonstrate that - https://jsfiddle.net/9bjszpxa/3/

Dynamically created elements don't trigger events despite using .on()

1 Answers1