Add jQuery to dynamic JS-DOM objects

Question

I'm creating several DOM-Objects with plain JavaScript which are placed into the page after everything is done.

Now I'd like to add some different functionality by using jQuery. And add it during the process of creation.

As it looks now (plain old, without any jQuery):

var mainput = document.createElement("textarea");
mainput.setAttribute("ID", "masseinfo_" + dsatz.ID);
mainput.setAttribute("onkeyup", "checkAndSendMaAjax(" + dsatz.ID + ", '" + masseinfoup + "', '" + dsatz.Typ + "', this.value)");

Using jQuery with keyup seems to fail as the object is not on the page yet.

mainput.keyup(debounce(250, function (e) {
    console.log('It works!');
    checkAndSendMaAjax(" + dsatz.ID + ", '" + masseinfoup + "', '" + dsatz.Typ + "', this.value);
}));

Error: keyup is not a function Using on is not much different.

mainput.on('keyup',null,(debounce(250, function (e) {
    console.log('It works!');
    checkAndSendMaAjax(" + dsatz.ID + ", '" + masseinfoup + "', '" + dsatz.Typ + "', this.value);
})));

Error: on is not a function

Searching a bit brought me to that page which wrote a bit about the usage of on instead of live:

$(".postitem").live("click", function() {...});

... would now be...

$(document).on("click", ".postitem", function() {...});

So I tried:

$(document).on('keyup',mainput,(debounce(250, function (e) {
        console.log('It works!');
        checkAndSendMaAjax(" + dsatz.ID + ", '" + masseinfoup + "', '" + dsatz.Typ + "', this.value);
    })));

Which is not generating an error, but doesn't do anything at all. What am I doing wrong?

score 1 · Answer 1 · answered Dec 13 '16 at 17:30

1

$.on() function 2nd argument is a string (selector) and not a DOM Element. Change the code to use the selector "#masseinfo_" + dsatz.ID or mainput.getAttribute("id")

$(document).on('keyup', mainput.getAttribute("id"),(debounce(250, function (e) {
    console.log('It works!');
    checkAndSendMaAjax(" + dsatz.ID + ", '" + masseinfoup + "', '" + dsatz.Typ + "', this.value);
})));

jQuery on function

answered Dec 13 '16 at 17:30

pedrofsantos

71
3

All I get is `TypeError: can't assign to properties of (new String("masseinfo_106")): not an object` – Qohelet Dec 14 '16 at 12:56
can you create a functional example of your problem? you can use https://jsfiddle.net/ for that – pedrofsantos Dec 14 '16 at 18:57
Well, problem is sorta solved. Not nicely though: `dsatzjqcode.push("$(document).on('keyup', '#masseinfo_" + dsatz.ID + "' ,function() {debounce(checkAndSendMaAjax(" + dsatz.ID + ", '" + masseinfoup + "', '" + dsatz.Typ + "', this.value),"+debouncetime+");});"); ` I throw everything in an array and use `eval` after the page is loaded – Qohelet Dec 14 '16 at 19:07

Add jQuery to dynamic JS-DOM objects

1 Answers1