Javascript 在Chrome扩展选项页面中单击事件不工作_Javascript_Google Chrome_Google Chrome Extension

Javascript 在Chrome扩展选项页面中单击事件不工作

javascript google-chrome google-chrome-extension

Javascript 在Chrome扩展选项页面中单击事件不工作,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,在我的选项页面中，我生成了一些带有输入编号和按钮的行，这些行与chrome存储中的条目相关问题是我为按钮创建的事件侦听器根本不起作用 options.html <html> <head> <title>Select the movie's Id</title> <style> body: { padding: 10px; } .style-1 input[type="number"]

在我的选项页面中，我生成了一些带有输入编号和按钮的行，这些行与chrome存储中的条目相关

问题是我为按钮创建的事件侦听器根本不起作用

options.html

<html>
<head>
    <title>Select the movie's Id</title>
    <style>
        body: { padding: 10px; }

        .style-1 input[type="number"] {
          padding: 10px;
          border: solid 1px #dcdcdc;
          transition: box-shadow 0.3s, border 0.3s;
          width: 5em;
        }
        .style-1 input[type="number"]:focus,
        .style-1 input[type="number"].focus {
          border: solid 1px #707070;
          box-shadow: 0 0 5px 1px #969696;
        }
    </style>
</head>

<body>
    <legend style="border-bottom: solid 1px">Insert</legend>
    <input type="number" name="id" id="id" value="">
    <button id="save">Insert</button>
    <br>
    <br>
    <legend style="border-bottom: solid 1px">Manage</legend>
    <div id="ghost" style="display: none">
        <input type="number" name="VAL">
        <button name="DEL" id="" >Delete</button>
        <br><br>
    </div>

    <script src="options.js"></script>
</body>


选择电影的Id
正文：{padding:10px；}
.style-1输入[type=“number”]{
填充：10px；
边框：实心1px#dcdc；
过渡：框阴影0.3s，边框0.3s；
宽度：5em；
}
.style-1输入[type=“number”]：焦点，
.style-1输入[type=“number”]。焦点{
边框：实心1px#707070；
盒影：0 0 5px 1px#969696；
}
插入
插入




管理
删除

options.js

document.getElementById('save').addEventListener('click', save_options);

chrome.storage.sync.get('movieId', function(result){
    for (var i=0; i<result.movieId.length; i++){
       createRow(result.movieId[i]); 
    }
});

function save_options() {
    var id = document.getElementById('id').value;
    chrome.storage.sync.get('movieId', function(result){
        var ids = result.movieId;
        ids.push(id);
        chrome.storage.sync.set({
            'movieId': ids
        }, function() { 
        });
        location.reload();
    });    
}

function createRow(pos){
    var newRows= document.getElementById('ghost').cloneNode(true);
    newRows.id= '';
    newRows.style.display= 'block';
    var newRow= newRows.childNodes;
    for (var i= 0; i< newRow.length; i++){
        var newName= newRow[i].name;
        if (newName){
            newRow[i].name = newName+pos;
            newRow[i].id = pos;
            newRow[i].value = pos;
        }
    }
    var insertHere= document.getElementById('ghost');
    insertHere.parentNode.insertBefore(newRows,insertHere);

    document.getElementById(pos).addEventListener('click', delet());
}

function loop(arrayIds){
    console.log('loop');
    for (var i=0; i<arrayIds.length; i++){
        createRow(i);
    }
}

function delet(){
    console.log("this.id");
    //chrome.storage.sync.remove(id);
}

document.getElementById（'save'）。addEventListener（'click'，save_选项）；
chrome.storage.sync.get（'movieId'，函数（结果）{
对于（var i=0；i
应该是
document.getElementById(pos).addEventListener('click', delet);

在代码段中，您正在调用delet
，因此该函数的结果被添加为未定义的事件侦听器。如果要将delet
绑定为事件处理程序，请将其传递给addEventListener
，而不调用它
编辑
正如我看到的代码一样，您为input
和button
提供了相同的id，当您调用document.getElementById
时，它返回input
而不是button
，因此，事件绑定到input
，而不是button

要修复此问题，请将createRow
替换为
function createRow(pos) {

    var newRow = document.getElementById('ghost').cloneNode(true);
    newRow.id= '';
    newRow.style.display= 'block';

    var value = newRow.querySelector("[name=VAL]");
    var button = newRow.querySelector("[name=DEL]");

    value.id = "VAL" + pos;
    value.value = pos;

    button.id = "DEL" + pos;

    var insertHere= document.getElementById('ghost');
    insertHere.parentNode.insertBefore(newRow, insertHere);

    button.addEventListener('click', delet);
}

谢谢你的回答，但它仍然不起作用。我也试过使用document.getElementById（pos）.addEventListener（'click'，function（）{delet（）}）；
这也不起作用。@cargide你能不能查看一下控制台中记录的错误？控制台没有显示任何内容，当我单击删除按钮时，console.log（“this.id”）；未显示。@cargide您是否可以与我共享存档的最小扩展名，以便我更好地调试此问题？谢谢您的帮助！现在我可以尝试真正删除这些内容了。
function createRow(pos) {

    var newRow = document.getElementById('ghost').cloneNode(true);
    newRow.id= '';
    newRow.style.display= 'block';

    var value = newRow.querySelector("[name=VAL]");
    var button = newRow.querySelector("[name=DEL]");

    value.id = "VAL" + pos;
    value.value = pos;

    button.id = "DEL" + pos;

    var insertHere= document.getElementById('ghost');
    insertHere.parentNode.insertBefore(newRow, insertHere);

    button.addEventListener('click', delet);
}