Блог

Я пытаюсь создать простую функцию в своем расширении Chrome, пользователю которой разрешено добавлять определенную кнопку, нажав «добавить кнопку», и удалить конкретную добавленную кнопку, нажав кнопку «Удалить» на popup.html .

Пользователь нажимает на кнопку удаления, и кнопка ассоциируется с «name = delete_’Usernamedstock’ «, что позволяет им удалять определенные

Но почему-то, когда пользователь добавляет новую кнопку, функция удаления jquery не работает? Я проверил в журнале консоли, и он работает правильно, но каждый раз, когда добавляется новый элемент, кнопка удаления перестает отвечать.

Пожалуйста, дайте мне знать, если потребуется дополнительная информация. Спасибо!

stock.js для добавления и удаления :

 //detect search bar input 
$("button[name = 'add']").click(function () {
    var tickerSymbol = $("input[id = 'tickerInput']").val()
    $("input[id = 'tickerInput']").val(""); //reset textbox empty
    console.log(tickerSymbol);
    //add in new item 
    if (tickerSymbol != "") { //only add if user has input
        addTicker(tickerSymbol);
    }

});

//user delete stock
//wild card to get everything start from delete_

$("button[name^= 'delete_']").click(function(){

    DeleteTicker = this.name.replace("delete_","")
    console.log("delete: "   DeleteTicker );
    
    //remove from list
    tickerList = tickerList.filter(function(item){
        return item != DeleteTicker
    })
    console.log("newTicker list "   tickerList);

    //save new list
    chrome.storage.sync.set({ Inputlist: tickerList }, function () {
        console.log("tiker list stored "   tickerList); //update the list
    });

    //update html, remove the div 
    $("#"  DeleteTicker ).remove();
   
});
//all the functions 
//function to add ticker in storage space 
function addTicker(input) {
    if (!tickerList.includes(input)) { //only add if no item
        tickerList.push(input);

        chrome.storage.sync.set({ key: input, Inputlist: tickerList }, function () {
            console.log("tiker list stored "   tickerList); //update the list
        });

        chrome.storage.sync.get(['key'], function (result) {
            console.log('Value currently is '   result.key);
            htmlStock(result.key); //write the html 
        });

    }
};

//function to display html 
function htmlStock(save_input) {
    $("#stockList").append(
        //div
        '<div class="btn-group dropleft" class = "stockItem"'  
        //set ticker symbol as div id
        'id='   save_input   '>'  
            //ticker button 
            '<button  class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'  
        save_input   //display button text
            '</button>'  
            //delete button
            '<button class="btn btn-secondary delete" type="button"'   
            'name = delete_'  save_input   '>'   //name the delete button 
                '<i class="fas fa-times-circle"></i>'  
            '</button>'  
            //dropdown menu
            '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">'  
                '<a class="dropdown-item" href="#">Action</a>'  
                '<a class="dropdown-item" href="#">Another action</a>'  
                '<a class="dropdown-item" href="#">Something else here</a>'  
            '</div>'  
        '</div>' 
    );
}

  

manifest.json

 {
    "name": "Stocking",
    "version": "1.0.0",
    "description": "Chrome extention",
    "manifest_version": 2,
    "icons":{"128":"icon/icon128.png"},
    "permissions": [
      "tabs",
      "<all_urls>",
      "storage"
    ],
    "browser_action":{
      "default_icon":{
        "16":"icon/icon16.png",
        "24":"icon/icon24.png",
        "32": "icon/icon32.png"},
      "default_popup": "popup.html",
      "default_title":"real time tracker",
      "js": [
        "bootstrap-4.4.1-dist/js/jquery-3.3.1.slim.min.js",
        "bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js"
      ],
      "css":[
        "bootstrap-4.4.1-dist/css/bootstrap4.5.2.min.css"
      ]
    }
  }