Javascript 动态创建的元素不'；尽管使用了.on（），但仍无法触发事件_Javascript_Jquery_Html_Css

Javascript 动态创建的元素不'；尽管使用了.on（），但仍无法触发事件

javascript jquery html css

Javascript 动态创建的元素不'；尽管使用了.on（），但仍无法触发事件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,注意，正如大多数答案所示，我已经在使用.on函数了。此问题与同一类别的其他问题大不相同。我的HTML代码是： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Order Stack</title> <link rel="stylesheet" type="text/css" href="style.cs

注意，正如大多数答案所示，我已经在使用.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>

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

});

$（文档）.ready（函数（）{
var orderId=4；//从表单4开始
$（“#提交”）。单击（函数（）{
var orderName=$（“#name”）.val（）；
var orderContent=$（“#order”）.val（）；
orderName=orderName.trim（）；
orderContent=orderContent.trim（）；
如果（（orderName！==）&&（orderContent！==））
{
$p=$（''）；
var content='OrderID:'+OrderID+'Name:'+orderName+'Order:'+orderContent；
内容+=''；
$p.append（内容）；
$p.appendTo（“#订单列表”）；
}
$（“#名称”）.val（“”）；
$（“#订单”）.val（“”）；
});
$（“#订单”）.keydown（函数（e）{
如果（e.keyCode==13）
$（“#提交”）。单击（）；
});
$（“.deleteBtn”）。在（'click'，function（）上{
$（this.parent（）.remove（）；
});
});

要描述问题

我知道动态创建的元素（通过代码创建的元素）通常不会由

触发。单击（）

事件处理程序。必须使用

.on（“event”，function（）{…code…}）

将事件绑定到元素。我已经做过了。然而，不知何故，deleteBtn的代码仍然没有被触发。我想不出是怎么回事。

你误解了（'click'，…）和

click（…）

关键是当您绑定事件时，

.deleteBtn

还不存在，因此如果您使用尝试将事件绑定到

。deleteBtn

使用

上的或单击，没有任何区别，因为它不存在
但是，#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
上发生的单击，然后检查事件。target
以查看引发事件的#orderList
中的确切元素。
方法上的绑定事件，并提供一个参数为您执行该检查，因此您可以将上述内容重写为：
$(document).ready(function() {
  $('#orderList').on('click', '.deleteBtn', function(event){
      // click happened on .deleteBtn or one of its children
  })
})

我已经更新了你的提琴来演示-
$（“#订单列表”）。在（'click'，'deleteBtn'，function（）{
@Tushar将$（.deleteBtn”）。在（'click'，function（）{…code…}
上，function（）{…code…}
不起作用？因为我试过了，但它不起作用。你知道为什么吗，先生？@SomenathSinha你需要附加。在（）
祖先元素上的事件处理程序，而不是选择器本身，因此Tushar所说的将起作用，但$（“.deleteBtn”）.on（'click'，function（）{…code…}
不会，正如您所看到的@DarkAjax，但通过使用Tushar的代码，我们有效地只选择了orderList
中具有类.deleteBtn
的元素。这与直接选择.deleteBtn元素有什么不同？
$(document).ready(function() {
  $('#orderList').on('click', '.deleteBtn', function(event){
      // click happened on .deleteBtn or one of its children
  })
})