将 jQuery 添加到动态 JS-DOM 对象
Posted
技术标签:
【中文标题】将 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
以上是关于将 jQuery 添加到动态 JS-DOM 对象的主要内容,如果未能解决你的问题,请参考以下文章