使用.html（）后，jQuery脚本不起作用
[英]jquery script doesn't work after using .html()
问题描述
when I use .html() to put data, the jQuery script doesn't work with the new data. 
当我使用.html（）放置数据时，jQuery脚本不适用于新数据。 The code is like the this: 代码是这样的：
<html>
<head>
<script>
$(document).ready(function(){
$("#newhtml").on("click", function(){
alert("I'm the NEW one!");
});
$("#put_new").on("click", function(){
$("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
});
});
</script>
</head>
<body>
<div id="newdiv"></div>
<input type="button" id="put_new" value="put new html" />
</body>
</html>
This is a simple example but there is more data I want to put and I want the new elements work with the script in this way. 这是一个简单的示例，但是我想放入更多数据，并且我希望新元素以这种方式与脚本一起使用。 I tried to search on stackoverflow.com but I didn't find any applicable one. 我试图在stackoverflow.com上搜索，但没有找到任何适用的搜索。 Thank you so much. 非常感谢。
4 个解决方案
解决方案1
3 2013-04-23 14:49:37
Thats because at the time of executing your current .on() statement, the element #newhtml does not exist. 那是因为在执行当前的.on()语句时，元素#newhtml不存在。
Change your event binding to: 将事件绑定更改为：
$(document).on('click', '#newhtml', function(){
alert("I'm the NEW one!");
});
The main element(s) you call on() on must be existing at the time of the call. 您on()调用on()的主要元素必须在调用时已存在。 In the second argument, you can specify selector(s) for element(s) that may not be existing at the time of binding. 在第二个参数中，可以为绑定时可能不存在的元素指定选择器。
解决方案2
2 已采纳 2013-04-23 14:51:02
Use this :- http://jsfiddle.net/FQjUZ/ 使用这个： -http : //jsfiddle.net/FQjUZ/
$("#newdiv").on("click", "#newhtml", function(){
alert("I'm the NEW one!");
});
$("#put_new").on("click", function(){
$("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
});
Reason is that, for this kind of functionality where elements are added at a later time to the DOM , you need to use delegated event handler, not just binding. 原因是，对于这种在以后将元素添加到DOM的功能 ，您需要使用委托的事件处理程序，而不仅仅是绑定。
Event handlers are bound only to the currently selected elements; 事件处理程序仅绑定到当前选定的元素； they must exist on the page at the time your code makes the call to .on() . 它们必须在您的代码调用.on（）时在页面上存在。
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
解决方案3
0 2013-04-23 14:51:30
your event on the newHtml will not work because you attach the event before adding the node to the DOM, so in order for it to work you need to implement your event after the html method is called. 您在newHtml上的事件将无法正常工作，因为您在将节点添加到DOM之前附加了事件，因此要使其正常工作，您需要在调用html方法之后实现事件。
$(document).ready(function(){
$("#put_new").on("click", function(){
$("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
$("#newhtml").on("click", function(){
alert("I'm the NEW one!");
});
});
});
解决方案4
0 2013-04-23 15:07:10
Try something like this. 尝试这样的事情。
var f00 = "doStuff()";
$("#newdiv").html('<input type="button" id="newhtml" value="click on me" onclick="' + f00 + '"/>');
function doStuff() {
//stuff
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.