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

Posted 2023-05-09

【中文标题】将 jQuery 添加到动态 JS-DOM 对象

【英文标题】：Add jQuery to dynamic JS-DOM objects

【发布时间】：2017-04-28 20:48:26

【问题描述】：

我正在创建几个带有纯 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);
    )));

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

【参考方案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

【讨论】：

我得到的只是TypeError: can't assign to properties of (new String("masseinfo_106")): not an object

你可以为你的问题创建一个功能示例吗？您可以为此使用jsfiddle.net

好吧，问题已经解决了。不过不太好：dsatzjqcode.push("$(document).on('keyup', '#masseinfo_" + dsatz.ID + "' ,function() debounce(checkAndSendMaAjax(" + dsatz.ID + ", '" + masseinfoup + "', '" + dsatz.Typ + "', this.value),"+debouncetime+"););"); 我将所有内容都放在一个数组中，并在页面加载后使用eval