事件未在使用 JQuery 和 Javascript 的 Chrome 扩展内触发答案

【问题标题】：Event not firing inside Chrome Extension using JQuery and Javascript事件未在使用 JQuery 和 Javascript 的 Chrome 扩展内触发
【发布时间】：2017-12-21 16:04:37
【问题描述】：

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

这里是 HTML sn-p:

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

}
);

非常感谢任何帮助！

【问题讨论】：

在创建删除按钮之前，您将单击处理程序附加到删除按钮。您应该在创建按钮后添加处理程序。
我没有看到 class 或 id 属性包含 delete 字符串的元素。

标签： javascript jquery html google-chrome

【解决方案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>

您在 <span> 和 <i> 元素上都使用 delete 作为类只需像这样触发他们：

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

并且在使用动态生成的元素时，重要的是使用$(document).on()触发它们的事件，否则不会被触发

【讨论】：

太棒了！这就是答案...$(document).on() 是缺失的部分。
记住只在id属性上使用#element，在class属性上使用.someClass;)

【解决方案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);
    });

 }
        );

【讨论】：

【解决方案3】：

如上所述，您以错误的方式实现了.on() 方法。在这里，我对您的代码几乎没有改进。最佳实践是基于较近的选择器搜索元素，而不是搜索整个 document。在下面的代码中，我在div 中搜索了.delete 类，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>

【讨论】：

question... 在这一行：$(this).parents('.newBoxParent').remove()... 如果用户添加多行，这会起作用吗？还是会一次性全部删除？
现在，我正在使用这个...$(this).parent().parent().parent().remove();
$(this).parents('.newBoxParent').remove() 将删除类为newBoxParent 的父div 类为delete 的按钮

【解决方案4】：

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

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

【讨论】：