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

您在<span>和<i>元素的Just觸發器上都使用delete作為類，它們是這樣的：

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

當使用動態生成的元素時，使用$(document).on()觸發事件很重要，否則它將不會被觸發

查看更多W33選擇器參考和JQuery文檔

Answer 2

如上述答案中所述，您以錯誤的方式實現了.on()方法。 在這里，我對您的代碼沒有什么改進。 最佳做法是基於更近的選擇器搜索元素，而不是搜索整個document 。 在下面的代碼中，我在ID為divIncome的div中搜索了.delete類。 它比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 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>