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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

 $(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 4

您正在动态地将DOM添加到文档中。您在开头添加的所有侦听器都不适用于新的侦听器。对于这种情况，jQuery使用文档或将要添加它的父项将监听器设置为$(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>

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

4 个答案: