将 jQuery 添加到动态 JS-DOM 对象

Question

我正在创建几个带有纯 JavaScript 的 DOM 对象，这些对象在一切完成后被放入页面中。

现在我想通过使用 jQuery 添加一些不同的功能。并在创建过程中添加。

现在看起来（普通旧，没有任何 jQuery）：

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

使用带有 keyup 的 jQuery 似乎失败了，因为该对象还没有出现在页面上。

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

错误：keyup is not a function 使用on 并没有太大的不同。

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

错误：on is not a function

搜索了一下，我找到了that page，它写了一些关于 on 而不是 live 的用法：

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

...现在是...

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

所以我尝试了：

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

这不会产生错误，但根本不做任何事情。 我做错了什么？

Answer 1

$.on() 函数的第二个参数是字符串（选择器）而不是 DOM 元素。 更改代码以使用选择器"#masseinfo_" + dsatz.ID 或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