Can helpers detect new elements created by createElement()?

help
1

I have a page with table. Each table row, has two links “delete”, and “edit”. “delete” works fine.

I would like to do this scenario:

  • When user clicks on row “edit” link, a small window appears with the fields of this row.
  • User decide to edit or not.
  • User may press “Save Changes”, or “Cancel”.

I did the option of small window with JavaScript document.createElement(), and the window appears successfully.
But I would like to add helpers for “Save Changes”, and “Cancel” buttons.
I can’t do this using helpers

 Template.codesList.events({
    'submit form#newForm': function (events) {
        // some actions
        };
    },

    'click #edit': function () {
        var px     = 'px';

        // Create an Overlay
        var myOverlay = createOverlay();
        document.body.appendChild(myOverlay);

        // Create edit window display it over the Overlay
        var editWindow = createPopup(300, 400);

        // Create elements and append it to edit window
        var editForm = editWindowForm(this._id, this.name);

        editWindow.appendChild(editForm);
        document.body.appendChild(editWindow);
    },

    'click #delete': function () {
        if (confirm("Are you sure?")) {
            Codes.remove({_id: this._id})
        }
    },

    'submit form#editForm': function (event) {
        event.preventDefault();
        console.log("Clicked");  // This doesn't displayed
    }
});

And this is the form after displaying it.

<form id="editForm" style="margin-right: 3em; margin-left: 3em;">
    <div class="form-group">
        <label for="itemCode" class="control-label">Code</label>
        <input id="itemCode" name="itemCode" class="form-control" placeholder="Enter code">
    </div>

    <div class="form-group">
        <label for="itemName" class="control-label">Name</label>
        <input id="itemName" name="itemName" class="form-control" placeholder="Enter name">
    </div>

    <input type="submit" value="Save Changes" class="btn btn-primary">
    <input type="button" value="Cancel" class="btn btn-info">
</form>

But when I press on “Save Changes” button, no print from console.log() and the form is making the normal submit and the page reloads again.
So, what I’m missing?

Update 1:
By the way that’s the output of the console:

> document.querySelector('form#editForm')
  <form id=​"editForm" style=​"margin-right:​ 3em;​ margin-left:​ 3em;​">​…​</form>​
2

I found the answer, I will write it as soon as possible - I just can’t write it right now - if it’s helpful for beginners like me.