CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Somenath Sinha
Somenath Sinha

Reputation: 1214

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

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.

Upvotes: 3

Views: 517

Answers (1)

Hugo Silva
Hugo Silva

Reputation: 6958

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/

Upvotes: 4

Related Questions