javascript - 使用 JQuery 和 Javascript 在 Chrome 扩展程序中未触发事件

Question

我对 JavaScript 有点陌生，在捕获我正在开发的 Chrome 扩展程序中的事件时遇到了问题。

这是 HTML 片段:

<div id="tabs-2">
    <div id="divIncome">
        <label for="box1">Label1</label>
        <div>
            <input type="text" id="box1" />
        </div>
        <label for="box2">Label2</label>
        <div>
            <input type="text" id="box2" />
        </div>
        <label for="box3">Label3</label>
        <div>
            <input type="text" id="box3" />
        </div>
    </div>
    <button type="button" class="button waves-effect" id="btnAddBox">Add Box</button><br />
    <div id="totalBox"></div>
</div>

上面代码中的按钮会触发一个事件，该事件会添加输入值行，并显示删除图标。这工作得很好。

我想要的效果是让用户能够单击删除图标并删除该行，但是当用户单击该图标时我无法触发事件。我尝试过使用类、名称和感觉像是所有可能的方法进行选择，但没有任何效果。

这是 JavaScript:

$(function () {

    // WORKING
    $("#btnAddIncome").on("click",
        function (e) {
            var $newOtherIncome = $("<label for='newBox'>New Label</label><div><span><input type='text' id='newBox' style='width:95%' /></span><span style='float:right' class='delete' id='delete'><i class='material-icons delete' style='font-size:20px;'>delete</i></span>");

            $("#divIncome").append($newOtherIncome);
        });

    // NOT FIRING
    $("#delete").on("click",
        function(e) {
            alert(e.type);
        });

    // NOT FIRING
    $(".delete").on("click",
        function(e) {
            alert(e.type);
        });

}
);

非常感谢任何帮助!

Answer 1

您正在使用class 删除不是 ID

在这部分代码中，您将附加到 #divIncome 上:

<label for='newBox'>New Label</label>
<div>
    <span>
        <input type='text' id='newBox' style='width:95%' />
    </span>
    <span style='float:right' class='delete' id='delete'>
       <i class='material-icons delete' style='font-size:20px;'>delete</i>
    </span>

您正在使用delete作为两者的类 <span>和<i>元素的 只需像这样触发他们:

$(document).on("click", ".delete", function(){
     //Do your stuff
});

当使用动态生成的元素时，使用 $(document).on() 触发其事件非常重要，否则不会触发

查看更多W33 Selectors Reference和 JQuery Documentation