storaging of dynamically created checkbox value

Question

So I have a todo list-like feature on one of my chrome extensions and I'm just not managing to get the checkbox to store the values.

I'm taking a bit of an unconventional approach in which I have a textbox and when I press enter, the textbox value creates my first todolist element in my div, then I send the textbox value to a textarea where I store all my todolist elements separated by a \\n . Then when I reload the page, my stored textarea separates the values by new line and outputs them in a div. Probably not the best way of doing something like this, but it has worked for me thus far.

Anyway, now I'm trying to store the checkbox value of dynamically created checkboxes. So I assign each checkbox an id of i in which i is < textareaLines . I can't seem to figure out how to store the checkboxes dynamically, I know how to store them individually but this seems harder to me.

Here is my code for setting my synced storage:

var todolines = $('#todoListSave').val().split('\n');
        for(var i = 0;i < todolines.length;i++){
        console.log(i);
        var isTodoListChecked = document.getElementById(i).checked;
        chrome.storage.sync.set({
             todoList: isTodoListChecked
        });
          console.log(isTodoListChecked); 
        }

and here is my code for getting my synced storage:

chrome.storage.sync.get('todoList', function (result) {
        todoList = result.todoList;
        console.log(todoList);
});

Any ideas? Perhaps I'm just really over thinking it, but I can't seem to figure it out.

Thanks.

Answer 1

My guess is that since the checkbox is dynamically generated, the line

var isTodoListChecked = document.getElementById(i).checked;

will not work. You will need to call the jquery .on() function the checkbox value.

$(document).on('checked', '#'+i, function(e){