事件未使用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

Answer 2

 $(function () {

// WORKING
$("#btnAddBox").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);
    });

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

 }
        );

Answer 3

如上面的答案所述，你以错误的方式实现了.on()方法。在这里，我的代码几乎没有改进。最佳实践是搜索基于较近选择器的元素，而不是搜索整个document。在下面的代码中，我在.delete中搜索了div类，其中包含id divIncome。它安全而快速，而不是document。

$(function () {

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

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

    // NOT FIRING
    $("#divIncome").on("click",'.delete',
        function(e) {
            $(this).parents('.newBoxParent').remove();
        });
        
        // NOT FIRING
    
}
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

您正在动态地将DOM添加到文档中。您在开头添加的所有侦听器都不适用于新的侦听器。对于这种情况，jQuery使用文档或将要添加它的父项来设置监听器as$(document).on('click','selector',callBack); Jquery .on 在您的情况下，选择器是.delete。我添加了删除功能，您可以在以下代码段中看到

$(function () {

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

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

    // NOT FIRING
    $(document).on("click",'.delete',
        function(e) {
            $(this).parents('.newBoxParent').remove();
        });

   
}
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>