javascript - 将 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)");

将 jQuery 与 keyup 结合使用似乎失败，因为该对象尚未出现在页面上。

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

错误:keyup不是函数 使用 on 没有太大不同。

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

错误:on 不是函数

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

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

... would now be...

$(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