Chrome扩展中复选框的更改事件未触发

Question

我正在创建一个Chrome扩展程序，在其中动态创建复选框。现在，在文档准备就绪时，我已经放置了处理复选框“checked”更改事件的代码，但是代码不像预期的那样工作，因为当我单击它时没有弹出任何警报。

创建动态复选框：

function createExtensionUI(extensionListArray){
var bkg = chrome.extension.getBackgroundPage();

    var extensionLength = extensionListArray.length;

    for(var i=0; i<extensionLength; i++){

        var extensionObject = extensionListArray[i];
        if(extensionObject.type == "extension"){        
            var checkbox = '<label><input type="checkbox" class= "extensionbox" id= ' + extensionObject.id  + '/>'+extensionObject.shortName+'</label>';
            $('#extensionList').append(checkbox);
            bkg.console.log(checkbox);
        }
    }

}

动态复选框HTML代码示例：

 <label><input type="checkbox" class= "extensionbox" id= "llegcghmokaemodgdddnchiijfdbfnlg"/>Coremetrics Bar for Chrome</label>

更改事件的代码：

$(document).ready(function(){

    chrome.management.getAll(getExtensionList);

    $("input[type=checkbox]").change(function() {
        alert('hello');
    });


});

我没有收到任何“hello”警报。我的扩展程序UI正常显示。

我尝试了以下方法，但它们都没有起作用：

$("input[type=checkbox]").change
$(".extensionbox").change

我正在使用jQuery版本 1.11.1

- RanRag

---

@AlexArt。控制台没有错误。 - RanRag

这不是有效的HTML代码，请用引号转义id。 - Xan

@RanRag ... id="' + extensionObject.id + '"/>' - Xan

我猜发生的事情是你的回调函数执行顺序不正确。请添加一些代码，以便在调用 createExtensionUI 时解决该问题。 - Xan

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - Xan

Answer 1

我认为问题在于异步执行。 没有你的getExtensionList代码很难确定。

显然，您从getExtensionList创建元素，该方法在其余的$(document).ready之后执行，因此您的侦听器无法附加，因为DOM元素尚不存在。

要解决此问题，请将附加侦听器的代码移动到createExtensionUI的末尾，逻辑上它本来就应该在那里。

- Xan