更改事件未觸發 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的末尾，它無論如何都屬於邏輯。