.on（）无法正常工作
[英].on() is not working
问题描述
Im using .on() function of jquery to be able to do something when div content is changed. 
我使用jquery的.on（）函数在div内容更改时能够执行某些操作。
Here's my code: 这是我的代码：
$( "div.contentdata" ).on( "onChange", function() {
document.write(".on jquery function is working.");
statement
.
.
});
However it is not working. 但是，它不起作用。
This is the complete code 这是完整的代码
<html>
<script type="text/javascript" src="static/path/to/widget-scroller.js"></script> <script type="text/javascript" src="static/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="static/path/to/jquery.tablesorter.js"></script>
<script type="text/javascript" src="static/path/to/jquery.tablesorter.widgets.js"></script>
<script>
function loadTable(logtype) {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("contents").innerHTML=xmlhttp.responseText;
}
}
if (logtype == "Option1") {
xmlhttp.open("GET","/Option1",true);
}
else if (logtype == "Option2"){
xmlhttp.open("GET","/Option2",true);
}
xmlhttp.send();
}
</script>
<body>
<div id="alldiv">
<!--Banner Div--> <div id="bannertable">
BANNER
</div>
<div id = "container" > <table id="holder"> <tr id="tr1">
<td id ="td1">
<div id = "nav">
<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')"> Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Show All</a>
<ul id="treemenu1" class="treeview">
<li>System
<ul>
<li>Monitoring</li>
</ul>
> <li><a href="#" onClick="loadTable('Option1')">Option1</a></li>
<li><a href="#" onClick="loadTable('Option2')">Option2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true)
</script>
</div>
</td>
<td id = "td2">
<div id = "contents" class="contentdata">
tables
</div>
</td> </tr> </table> </div> </div>
</body> </html>
4 个解决方案
解决方案1
8 2014-01-14 09:18:50
standard event handlers registered with
.ondon't need an"on"prefix, and won't work if you include it.向.on注册的标准事件处理程序不需要"on"前缀，如果包含它，则将不起作用。Div's don't even fire a
changeevent when their contents change anyway.当其内容发生change时，Div甚至不会触发change事件。You can register for "DOMMutation" events that do fire when an element changes, but they're not widely supported, and are being replaced with an alternate API in the next version of the DOM specification.
您可以为“DOMMutation”事件做火的时候一个元素改变注册，但他们没有得到广泛的支持，并正在与DOM规范的下一个版本的替代API取代。 Unless you're writing a browser extension, if your element's contents are changing, it will be your code that's doing it.
除非您正在编写浏览器扩展，否则如果元素的内容正在更改，则将由您的代码来完成。 Figure out where (probably in your Ajax callback) and do your thang there instead. 找出位置（可能在您的Ajax回调中），然后在那里执行thang。 You're using jQuery - use
$.get()instead of rolling your own Ajax code withXMLHttpRequestobjects.您正在使用jQuery-使用$.get()而不是使用XMLHttpRequest对象滚动自己的Ajax代码。You're still using jQuery - register all event handlers in your JS code, not "inline" with
"javascript:"links.您仍在使用jQuery-在您的JS代码中注册所有事件处理程序，而不是使用"javascript:"链接“内联”。
解决方案2
1 已采纳 2014-01-14 09:19:56
Your code is working fine, except <div> elements do not have a change event. 您的代码运行正常，但<div>元素没有change事件。 If you need to triggere an event when the innterHTML of div.contentdiv is changed, you'd be better to do that in the success callback of your AJAX method (quite simple if you use jQuery's $.get() or $.ajax() ). 如果您需要在div.contentdiv的div.contentdiv更改时触发事件，则最好在AJAX方法的success回调中执行此操作（如果使用jQuery的$.get()或$.ajax() ）。
You might also consider looking at DOMNodeInserted and DOMNodeRemoved , but these are general mutation events and might not translate to your requirements. 您可能还考虑查看DOMNodeInserted和DOMNodeRemoved ，但是这些是常规的突变事件，可能无法转换为您的要求。
Ben Nadel also blogged about a similar kind of issue here . 本·纳德尔（Ben Nadel）在这里也写了一篇类似的博客。
解决方案3
0 2014-01-14 09:20:03
This should be changed! 这应该改变！
$( "div.contentdata" ).on( "onChange", function() {
To this: 对此：
$( "div.contentdata" ).on( "Change", function() {
Second thing, please note divs don't have this method: onchange since their value is static and is not changed. 第二件事，请注意div没有这种方法： onchange因为它们的值是静态的并且不会更改。
http://api.jquery.com/change/ (jQuery change) http://api.jquery.com/change/（jQuery更改）
This is used for select , input etc. 这用于select ， input等。
http://api.jquery.com/on/ (jQuery on) http://api.jquery.com/on/ （启用jQuery）
jQuery Ajax: http://api.jquery.com/category/ajax/ jQuery Ajax： http : //api.jquery.com/category/ajax/
People use jQuery ajax nowadays, so please use it! 现在人们使用jQuery ajax，所以请使用它！
解决方案4
0 2014-01-14 09:23:07
You can attach a custom eventHandler to do something, but you have to trigger it yourself. 您可以附加一个自定义的eventHandler来执行某些操作，但是您必须自己触发它。 You can trigger them by using .trigger(...) . 您可以使用.trigger(...)触发它们。 Something like: 就像是：
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("contents").innerHTML=xmlhttp.responseText;
// Trigger your custom eventHandler
$("div.contentdata").trigger("onChange");
}
}
The eventType you trigger with trigger(...) needs to be the same as you use with .on(...) 使用trigger(...)触发的eventType必须与使用.on(...)
http://api.jquery.com/trigger/ http://api.jquery.com/trigger/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.