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

Question

我正在创建一个 chrome 扩展，我在其中动态创建复选框。 现在文档准备好了，我已经放置了代码来处理复选框的“选中”更改事件，但是代码没有按预期工作，因为当我单击它时没有收到任何警报。

创建动态复选框：

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


});

没有收到任何“你好”警报。 我的扩展用户界面正在正常运行。

我尝试了以下方法，但它们也没有奏效：

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

我正在使用 jquery 版本1.11.1

Answer 1

我认为问题在于异步执行。 但是，如果没有您的getExtensionList代码，就很难确定。

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

要修复，请将附加侦听器的代码移动到createExtensionUI的末尾，它无论如何都属于逻辑。